DnD List

Drag and Drop for sortable lists in Elm web apps with mouse and pointer support.

Demos and Sources

Examples

$ npm install -g elm elm-live
$ npm run watch

Basic API

create : DnDList.Config a -> Msg -> DnDList.System a Msg

port onPointerMove : (Json.Encode.Value -> msg) -> Sub msg

port onPointerUp : (Json.Encode.Value -> msg) -> Sub msg

port releasePointerCapture : Json.Encode.Value -> Cmd msg

createWithTouch :
    Config a
    -> (Msg -> msg)
    -> ((Json.Encode.Value -> msg) -> Sub msg) -- onPointerMove
    -> ((Json.Encode.Value -> msg) -> Sub msg) -- onPointerUp
    -> (Json.Encode.Value -> Cmd msg) -- releasePointerCapture
    -> System a msg

update: DnDList.Msg -> DnDList.Model -> List a -> ( DnDList.Model, List a )

dragEvents : DragIndex -> DragElementId -> List (Html.Attribute Msg)

dropEvents : DropIndex -> DropElementId -> List (Html.Attribute Msg)

ghostStyles : DnDList.Model -> List (Html.Attribute Msg)

info : DnDList.Model -> Maybe DnDList.Info

Config

pseudocode type alias Config a =
    { beforeUpdate : DragIndex -> DropIndex -> List a -> List a

    , movement : Free
               | Horizontal
               | Vertical

    , listen : OnDrag
             | OnDrop

    , operation : InsertAfter
                | InsertBefore
                | Rotate
                | Swap
                | Unaltered
    }

Info

type alias Info =
    { dragIndex : Int
    , dropIndex : Int
    , dragElementId : String
    , dropElementId : String
    , dragElement : Browser.Dom.Element
    , dropElement : Browser.Dom.Element
    , startPosition : { x : Float, y : Float }
    , currentPosition : { x : Float, y : Float }
    }

Real Projects

• Risk Register by ProjectBalm is a risk management add-on for Atlassian Jira.
  dnd-list is used in the risk model editor for re-ordering risk levels, and is even used to re-order the rows and columns of the risk matrix.
• Tournament Organiser helps optimise the order of games in a tournament. dnd-list is used to manually tweak the game order after optimisation.

Credits

This package was inspired by the following shiny gems:

• ir4y/elm-dnd :gem:
• zwilias/elm-reorderable
• Dart Drag and Drop