This library handles dragging and dropping using the API from the HTML 5 recommendation at https://www.w3.org/TR/html/editing.html#drag-and-drop.
It provides attributes and a model/update to handle dragging and dropping between your elements.
Types are parametrized with a dragId and a dropId parameter, which are the
types for the drag identifier passed to the draggable function
and the drop identifier passed to the droppable function.
You can put whatever data you like in these, but don't use function types.
You can use several instances of this model at the same time and they won't interfere with each other. Drag and drop are connected to an instance by the Msg constructor used, and the update function will not send a result if a drop was made from another instance.
The initial drag and drop state.
You should use this as the initital value for the drag and drop state in your model.
The drag and drop messages.
This should be placed inside your application's messages like this:
type Msg
= ...
| DragDropMsg (Html5.DragDrop.Msg DragId DropId)The update function.
When a successful drag and drop is made, this function will return a result
consisting of the dragId and dropId that was specified in the
draggable and droppable
calls for the corresponding nodes.
This should be placed inside your application's update function, like this:
update msg model =
case msg of
...
DragDropMsg msg_ ->
let
( model_, result ) =
Html5.DragDrop.update msg_ model.dragDrop
in
{ model
| dragDrop = model_
, ...use result if available...
}Attributes to make a node draggable.
The node you put these attributes on will be draggable with the dragId you provide.
It should be used like this:
view =
...
div (... ++ Html5.DragDrop.draggable DragDropMsg dragId) [...]Droppable attributes for your view function.
The node you put these attributes on will be droppable with the dropId you provide.
It should be used like this:
view =
...
div (... ++ Html5.DragDrop.droppable DragDropMsg dropId) [...]Get the current dragId if available.
This function can be used for instance to hide the draggable when dragging.
Get the current dropId if available.
This function can be used for instance to highlight the droppable when dragging over it.
The drag and drop state.
This should be placed inside your application's model like this: