Draggable

This library provides and easy way to make DOM elements (Html or Svg) draggable.

When is dragging considered?

An element is considered to be dragging when the mouse is pressed and moved before it is released. Otherwise, the action is considered a click. This is useful because in some cases you may want to support both actions.

See examples

Initial State

init : State a

Initial drag state

Config

basicConfig : (Delta -> msg) -> Config a msg

Basic config

config =
    basicConfig OnDragBy

customConfig : List (Event a msg) -> Config a msg

Custom config, including arbitrary options. See Events.

config =
    customConfig
        [ onDragBy OnDragBy
        , onDragStart OnDragStart
        , onDragEnd OnDragEnd
        ]

Update

update :

Config a msg

-> Msg a

-> { m | drag : State a }

-> ( { m | drag : State a }, Cmd msg )

Handle update messages for the draggable model. It assumes that the drag state will be stored under the key drag.

subscriptions : (Msg a -> msg) -> State a -> Sub msg

Handle mouse subscriptions used for dragging

DOM trigger

mouseTrigger : a -> (Msg a -> msg) -> Attribute msg

DOM event handler to start dragging on mouse down. It requires a key for the element, in order to provide support for multiple drag targets sharing the same drag state. Of course, if only one element is draggable, it can have any value, including ().

div [ mouseTrigger "element-id" DragMsg ] [ text "Drag me" ]

customMouseTrigger : Decoder a -> (Msg () -> a -> msg) -> Attribute msg

DOM event handler to start dragging on mouse down and also sending custom information about the mousedown event. It does so by using a custom Decoder for the MouseEvent.

div [ mouseTrigger offsetDecoder CustomDragMsg ] [ text "Drag me" ]

touchTriggers : a -> (Msg a -> msg) -> List (Attribute msg)

DOM event handlers to manage dragging based on touch events. See mouseTrigger for details on the key parameter.

Definitions

type alias Delta =

( Float, Float )

A type alias representing the distance between two drag points.

type State a

Drag state to be included in model.

type Msg a

A message type for updating the internal drag state.

type Config a msg

Configuration of a draggable model.

type alias Event a msg =

Event a msg

An event declaration for the draggable config

zaboco/elm-draggable/4.0.5