DnDList

While dragging a list item, the mouse events and the list reordering are handled internally by this module.

First you need to create a System variable which holds the information and functions related to the drag operation. Using this variable you can wire up the internal model, subscriptions, and commands into your model, subscriptions and commands respectively. Also you can get access to the drag and drop events as well as the dragged position styles in your view functions.

Finally you need to wrap up the internal messages into your message, and pass them along with your sortable list to the internal DnDList.update function within your update funcion. The update will return back with the reordered list.

System

A System represents the information about the drag operation and the drag related functions.

type alias System m =

{ draggable : Draggable

, subscriptions : Draggable -> Sub m

, commands : Draggable -> Cmd m

, dragEvents : Int -> String -> List (Attribute m)

, dropEvents : Int -> List (Attribute m)

, draggedStyles : Draggable -> Movement -> List (Attribute m)

}

A System encapsulates a Draggable which represents the information about the drag operation, as well as the drag related subscriptions, commands, events and styles.

For the details, see System Fields

create : (Msg -> m) -> System m

Creates a System parametrized with your message wrapper.

system : DnDList.System Msg
system =
    DnDList.create DnDMsg


...


type Msg
    = DnDMsg DnDList.Msg

System Fields

draggable

type Draggable

A Draggable represents the information about the current drag operation. It should be set in your model and can be initialized through the System's draggable field.

type alias Model =
    { draggable : DnDList.Draggable
    , items : List a
    }


initialModel : Model
initialModel =
    { draggable = system.draggable
    , items = [...]
    }

subscriptions

subscriptions is a function to access browser events during the drag.

subscriptions : Model -> Sub Msg
subscriptions model =
    system.subscriptions model.draggable

commands

commands is a function to access the DOM for the dragged element x, y, width and height information.

For a more detailed update function see Update

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DnDMsg message ->
            let
                updatedModel = ...
            in
            ( updatedModel, system.commands model.draggable )

dragEvents

dragEvents is a function which wraps all the events for draggable elements.

model.items
    |> List.indexedMap
        (\index item ->
            let
                itemId : String
                itemId =
                    "id-" ++ item
            in
            Html.div
                (Html.Attributes.id itemId :: system.dragEvents index itemId)
                [ Html.text item ]
        )
    |> Html.div []

dropEvents

dropEvents is a function which wraps all the events for droppable elements.

model.items
    |> List.indexedMap
        (\index item ->
            Html.div
                (system.dropEvents index)
                [ Html.text item ]
        )
    |> Html.div []

draggedStyles

draggedStyles is a helper to set the current position of the dragged element. It accepts a Movement argument.

Html.div
    (system.draggedStyles model.draggable DnDList.Free)
    [ Html.text item ]

type Movement

= Free

| Horizontal

| Vertical

Represents the mouse dragging movement. Dragging can be restricted to vertical or horizontal axis only, or it can be free.

Update

While dragging an item, the mouse events and the list updates are handled internally by this module.

type Msg

Internal message type.

type Msg
    = DnDMsg DnDList.Msg

update : Msg -> Draggable -> List a -> ( Draggable, List a )

Internal update function which returns an updated Draggable and the reordered list for your model.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DnDMsg message ->
            let
                ( draggable, items ) =
                    DnDList.update message model.draggable model.items
            in
            ( { model | draggable = draggable, items = items }
            , dnd.commands model.draggable
            )

Helper

getDragIndex : Draggable -> Maybe Int

Returns the index of the dragged item.

maybeDragIndex : Maybe Int
maybeDragIndex =
    DnDList.getDragIndex model.draggable

Modules

DnDList

annaghi/dnd-list/1.0.2