Elm Draggable Versions Save

An easy way to make DOM elements draggable

2.1.0

7 years ago

Get custom information about the mouse position on mousedown

customMouseTrigger : Decoder a -> (Msg -> a -> msg) -> VirtualDom.Property msg

3.0.0

7 years ago

Allow draggable elements to have keys of any type, instead of String. Easy to migrate to, just add the type parameter to State, Msg and Config. If the key isn't used, it can have the type ():

  • Draggable.State ()
  • Draggable.Msg ()
  • Draggable.Config () Msg

2.0.0

7 years ago

2.0.0

1. Delta now uses floats

This change was made because it seems to be more common to need floats when handling positions:

  • in elm-css px expects a Float
  • in linear-algebra fromTuple also expects Floats

Actual changes:

  • changed Delta alias to (Float, Float).
  • removed deltaToFloats - no longer needed. Also, did not feel like a "mirror" deltaToInts would have been that useful for the common case.

2. Consolidated keyed API

Version 1.1.0 introduced the ability to have multiple drag targets, each identified by its own key. Since it was a minor release, it only added new functions alongside the old ones: onMouseDownKeyed as a "keyed" alternative to onMouseDown and mouseTrigger as a more general triggerOnMouseDown (which was deprecated). In this release the old API is updated to handle keys by default:

  • triggerOnMouseDown is removed - mouseTrigger "" should be used instead.
  • onMouseDownKeyed is renamed to onMouseDown.
  • onMouseDown will now get a Key - old calls can be replaced with onMouseDown (\_ -> OnMouseDown).
  • onDragStart and onClick will also get a Key.

Fixes #23

3. Removed onMouseUp

This event is not actually needed, since it can handled as a regular DOM event. However, onMouseDown can't be removed because a DOM element cannot handle two events of the same type: the last one will override the first. So, in the following example HandleMouseDown will be handled, but dragging will not work:

Html.div
    [ Draggable.mouseTrigger "" DragMsg
    , Html.Events.onMouseDown HandleMouseDown
    ]

So, the following change is needed to keep onMouseUp working:

  dragConfig =
      Draggable.customConfig
          [ onDragBy HandleDragBy
-         , Draggable.Events.onMouseUp HandleMouseUp
          ]

  view =
      Html.div
          [ Draggable.mouseTrigger "" DragMsg
+         , Html.Events.onMouseUp HandleMouseUp
          ]