annaghi/dnd-list - version: 6.0.1

for more information visit the package's GitHub page

Package contains the following modules:

Latest Version Build Status

DnD List

Drag and Drop for sortable lists in Elm web apps with mouse 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
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

Credits

This package was inspired by the following shiny gems: