This library provides and easy way to make DOM elements (Html or Svg) draggable.
An element is considered to be dragging when the mouse is pressed and moved before it is released. Otherwise, the action is considered a click. This is useful because in some cases you may want to support both actions.
init : State a
Initial drag state
basicConfig : (Delta -> msg) -> Config a msg
Basic config
config =
basicConfig OnDragBy
customConfig : List (Event a msg) -> Config a msg
Custom config, including arbitrary options. See Events
.
config =
customConfig
[ onDragBy OnDragBy
, onDragStart OnDragStart
, onDragEnd OnDragEnd
]
update : Config a msg -> Msg a -> { m | drag : State a } -> ( { m | drag : State a }, Platform.Cmd.Cmd msg )
Handle update messages for the draggable model. It assumes that the drag state will be stored under the key drag
.
subscriptions : (Msg a -> msg) -> State a -> Platform.Sub.Sub msg
Handle mouse subscriptions used for dragging
mouseTrigger : a -> (Msg a -> msg) -> Html.Attribute msg
DOM event handler to start dragging on mouse down. It requires a key for the element, in order to provide support for multiple drag targets sharing the same drag state. Of course, if only one element is draggable, it can have any value, including ()
.
div [ mouseTrigger "element-id" DragMsg ] [ text "Drag me" ]
customMouseTrigger : k -> Json.Decode.Decoder a -> (Msg k -> a -> msg) -> Html.Attribute msg
DOM event handler to start dragging on mouse down and also sending custom information about the mousedown
event. It does so by using a custom Decoder
for the MouseEvent
.
div [ customMouseTrigger () offsetDecoder CustomDragMsg ] [ text "Drag me" ]
whenLeftMouseButtonPressed : Json.Decode.Decoder a -> Json.Decode.Decoder a
Modify a decoder to only trigger for the left mouse button.
This modifier is already applied to the basic mouseTrigger
. It's only useful in conjunction with customMouseTrigger
.
div
[ customMouseTrigger () (whenLeftMouseButtonPressed offsetDecoder) CustomDragMsg ]
[ text "Drag me" ]
touchTriggers : a -> (Msg a -> msg) -> List (Html.Attribute msg)
DOM event handlers to manage dragging based on touch events. See mouseTrigger
for details on the key
parameter.
( Basics.Float, Basics.Float )
A type alias representing the distance between two drag points.
Drag state to be included in model.
A message type for updating the internal drag state.
Configuration of a draggable model.
Internal.Event a msg
An event declaration for the draggable config