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" ]

triggerOnMouseDown : (Msg -> msg) -> Property msg

DEPRECATED: Use mouseTrigger instead

DOM event handler to start dragging on mouse down.

div [ triggerOnMouseDown DragMsg ] [ text "Drag me" ]

Helpers

deltaToFloats : Delta -> ( Float, Float )

Converts a Delta to a tuple of Floats. Can be used to change the argument to DragBy messages, when float operations are needed:

dragConfig =
    Draggable.basicConfig (OnDragBy << Draggable.deltaToFloats)

A use case for that could be converting the Delta to a Vector type (e.g. Math.Vector2.Vec2 from linear-algebra)

dragConfig =
    Draggable.basicConfig (OnDragBy << Vector2.fromTuple << Draggable.deltaToFloats)

See PanAndZoomExample

Definitions

type alias Delta =

( Int, Int )

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/1.1.0