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

Initial drag state

Config

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

Basic config

config = basicConfig OnDragBy

customConfig : List (Event msg) -> Config msg

Custom config, including arbitrary options. See Events.

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

Update

update :

Config msg

-> Msg

-> { m | drag : State }

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

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

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

Handle mouse subscriptions used for dragging

DOM trigger

mouseTrigger : String -> (Msg -> msg) -> Property msg

DOM event handler to start dragging on mouse down. It requires a String 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" ]

Definitions

type alias Delta =

( Float, Float )

A type alias representing the distance between two drag points.

type State

Drag state to be included in model.

type Msg

A message type for updating the internal drag state.

type Config msg

Configuration of a draggable model.

type alias Event msg =

Event msg

An event declaration for the draggable config

zaboco/elm-draggable/2.0.2