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 object which holds the information and functions related to the drag operation.

Using this object you can wire up the internal model, subscriptions, commands, and update into your model, subscriptions, commands, and update respectively. Also you can get access to the drag and drop events as well as the dragged position styles in your view functions.

System

type alias System m a =

{ draggable : Draggable

, subscriptions : Draggable -> Sub m

, commands : Draggable -> Cmd m

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

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

, dropEvents : Int -> List (Attribute m)

, draggedIndex : Draggable -> Maybe Int

, draggedStyles : Draggable -> List (Attribute m)

}

A System encapsulates a Draggable which represents the information about the drag operation and the drag related functions.

For the details, see System Fields

create : Config m -> System m a

Creates a System parametrized with your configuration.

Having a list of fruits:

type alias Fruit =
    String


data : List Fruit
data =
    [ "Apples", "Bananas", "Cherries", "Dates" ]

The system is a wrapper type of your message and list item types:

system : DnDList.System Msg Fruit
system =
    DnDList.create config

type alias Config m =

{ message : Msg -> m

, movement : Movement

}

Represents the System configuration.

message: your message wrapper
movement: the kind of the Movement. It can be Free, Horizontal, or Vertical.

Example configuration:

config : DnDList.Config Msg
config =
    { message = DnDMsg
    , movement = DnDList.Free
    }


...


type Msg
    = DnDMsg DnDList.Msg

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.

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


initialModel : Model
initialModel =
    { draggable = system.draggable
    , items = data
    }

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.

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

update

update is a 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 ) =
                    system.update message model.draggable model.items
            in
            ( { model | draggable = draggable, items = items }
            , 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 []

draggedIndex

draggedIndex is a helper which returns the index of the dragged element.

maybeDraggedIndex : Maybe Int
maybeDraggedIndex =
    system.draggedIndex model.draggable

draggedStyles

draggedStyles is a helper to set the current position of the dragged element.

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

Message

type Msg

Internal message type. You should wrap it within your message constructor.

type Msg
    = DnDMsg DnDList.Msg

Modules

DnDList

annaghi/dnd-list/4.0.0