The drag and drop state.

This should be placed inside your application's model like this:

type alias Model =
    { ...
    , dragDrop : Html5.DragDrop.Model DragId DropId
    }

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 position inside a droppable. Contains the droppable's width and height, as well as the current x and y position, using the target.clientWidth, target.clientHeight, offsetX, and offsetY from the ondragover event.

Note, that in some cases, x and y may be negative, or larger than the clientWidth and height, if a drop event is registered outside the CSS padding edge.

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. It will also return a Position for the drop event.

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...
                }

A "sticky" version of the update function.

It's used the same way as the update function, but when you use this version, droppables are "sticky" so when you drag out of them and release the mouse button, a drop will still be registered at the last droppable. You should preferably provide some sort of indication (using getDropId) where the drop will take place if you use this function.

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) [...]

Attributes to make a node droppable.

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) [...]

Attributes to make a node droppable and keep track of the position within it while dragging.

Used the same way as the droppable function.

The node you put these attributes on will be droppable with the dropId you provide. It will also keep track of the position and the size of the droppable element when dragging over it, which you can access using the getDroppablePosition function. The drawback of using this is that a lot of messages will be sent when dragging over a droppable.

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.

Get the current Position when dragging over the droppable, if available. The position is only available if you have specified droppableWithPosition on your droppable.