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.0
Committed At 2018-11-17 08:37:01 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 attributes and a model/update to handle dragging and dropping between your elements.

To use on mobile, you can include the following polyfill: https://github.com/Bernardo-Castilho/dragdroptouch

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