DnD

This library allows you to build great UI with drag-and-drop simple. It is abstracting you from mouse events and other low-level staff. You can operate high-level things such as draggable and droppable areas.

The idea of package API is you should be able to wrap elements with draggable meta to add an ability to drag it. The dragged object will get some meta information. Also, you could wrap another element with droppable OnDrop, so if you drop element over that element, the message OnDrop meta will be fired.

You can find examples here.

Draggable types and its constructor

type alias DraggableInit a m =

{ model : Draggable a m

, subscriptions : Draggable a m -> Sub m

, draggable : a -> List (Attribute m) -> List (Html m) -> Html m

, droppable : (a -> m) -> List (Attribute m) -> List (Html m) -> Html m

}

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

type Draggable a m

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
    }

init : (Msg a m -> m) -> DraggableInit a m

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

Helpers to get information about draggable object

atDroppable : Draggable a m -> Maybe m

Helper that return you a message that will be invoked. 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.atDroppable model.draggable of
         Just (Dropped _) ->
           "cyan"

         _ ->
           "white"
     ]
   ]
   []

getMeta : Draggable a m -> Maybe a

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
            |>  getMeta
            |> Maybe.map (meta -> meta.id /= e.id )
        )

Message type

type Msg a m

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

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

Update function

update : Msg a m -> Draggable a m -> Draggable a m

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

dragged : Draggable a m -> (a -> Html m) -> Html m

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

ir4y/elm-dnd/2.0.0

DnD

Draggable types and its constructor

Helpers to get information about draggable object

Message type

Update function

View helper

Modules