The type of init function result. See init for more information.

Type of Draggable object. It is parametrized by types of dragMeta and dropMeta. You should place it inside your Model.

type alias Model =
    { draggable : DnD.Draggable Int Int
    , count : Int
    }

Initialize Draggable state and function This helper returns initModel, subscription, draggable and droppable functions for your message wrapper.

type Msg
    = NoOp
    ..
    | Dropped Int Int
    | DnDMsg (DnD.Msg Int Int)


dnd = DnD.init DnDMsg Dropped
type alias Model =
    { ...
    , draggable = dnd.model
    }

Subscriptions alow you to get drop event.

subscriptions : Model -> Sub Msg
subscriptions model =
    dnd.subscriptions model.draggable

View wrapper for draggable object, you could drag object wrapped by this helper

draggable
    : List (Html.Attribute Msg)
    -> List (Html Msg)
    -> Html Msg
draggable = dnd.draggable dragMeta

View helper for the droppable area, you could drop object to this area, after that, your Dropped meta message will be sended.

droppable
    : List (Html.Attribute Msg)
    -> List (Html Msg)
    -> Html Msg
droppable = dnd.droppable dropMeta

Helper that return you a dropMeta that will be used if an object will be dropped at the current area. It is useful to check is it area allow you to drop an object and highlight it for example.

dnd.droppable meta
   [ style
     [ "background-color"
       => case DnD.getDropMeta model.draggable of
         Just _ ->
           "cyan"

         _ ->
           "white"
     ]
   ]
   []

Helper that allow you to get meta information from a current draggable object. You can use it to remove draggable object from the list

elements = model.elements
    |> List.filter
        (\e -> model.draggable
            |> getDragMeta
            |> Maybe.map (\meta -> meta.id /= e.id )
        )

Inner messages, you should pass them to DnD.update at your update function.

type Msg
    = Dropped Int
    | DnDMsg (DnD.Msg Int Int)

Update function handle all low-level staff

update : Msg -> Model -> Model
update msg model =
    case msg of
        Dropped item ->
            { model | count = item + 1 }

        DnDMsg msg ->
            { model
                | draggable
                    = DnD.update msg model.draggable }

View helper for a draggable object, it draws HTML of dragged object under your mouse in process of drag.

box : Int -> Html Msg
dragged item =
    p [] [ text item.text]

DnD.dragged
  model.draggable
  box