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

Type of Draggable object. It is parametrized by the type of meta information and message constructor that will be invoked on Drop event You should place it inside your Model.

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

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

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


dnd = DnD.init DnDMsg
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
    : (Html.Attribute Msg)
    -> List (Html Msg)
    -> Html Msg
draggable =  dnd.draggable meta

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

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

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 Dropped
  DnDMsg
   [ 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 Item
    | DnDMsg (DnD.Msg Int Msg)

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