This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
This library handles dragging and dropping using the HTML5 API
version 2.0.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 3.1.1
Committed At 2018-11-18 10:45:40 UTC
mdgriffith/stylish-elephants 5.0.0 <= v < 6.0.0 5.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
Skinney/elm-array-exploration 2.0.5 <= v < 3.0.0 2.0.5

README

HTML 5 Drag and Drop API

This library handles dragging and dropping using the API from the HTML 5 recommendation at https://www.w3.org/TR/html/editing.html#drag-and-drop.

It provides view attributes to make elements draggable and droppable and a model/update to keep track of what is being dragged and the drop target and position within it.

See the Html5.DragDrop module for more details.

Basic usage

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


type Msg
    = ...
    | DragDropMsg (Html5.DragDrop.Msg DragId DropId)


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


view =
   ...
   div (... ++ Html5.DragDrop.draggable DragDropMsg dragId) [...]
   ...
   div (... ++ Html5.DragDrop.droppable DragDropMsg dropId) [...]

Example

https://github.com/norpan/elm-html5-drag-drop/blob/master/example/Example.elm