ir4y / elm-dnd / 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 dragMeta to add an ability to drag it. The dragged object will get some meta information via dragMeta argument. Also, you could wrap another element with droppable dropMeta, so if you drop element over that element, the message YourOnDropMessage dropMeta dragMeta will be fired.

You can find simple examples here. For more complex example check Chess Board.

Draggable types and its constructor


type alias DraggableInit dropMeta dragMeta m =
{ model : Draggable dropMeta dragMeta
, subscriptions : Draggable dropMeta dragMeta -> Platform.Sub.Sub m
, draggable : dragMeta -> List (Html.Attribute m) -> List (Html m) -> Html m
, droppable : dropMeta -> List (Html.Attribute m) -> List (Html m) -> Html m 
}

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


type Draggable dropMeta dragMeta

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
    }

init : (Msg dropMeta dragMeta -> m) -> (dropMeta -> dragMeta -> m) -> DraggableInit dropMeta dragMeta m

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

Helpers to get information about draggable and droppable object

getDropMeta : Draggable dropMeta dragMeta -> Maybe 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"
    ]
    []

getDragMeta : Draggable dropMeta dragMeta -> Maybe dragMeta

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)
            )

Message type


type Msg dropMeta dragMeta

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

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

Update function

update : Msg dropMeta dragMeta -> Draggable dropMeta dragMeta -> Draggable dropMeta dragMeta

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 dropMeta dragMeta -> (dragMeta -> 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