An easy way to make DOM elements draggable
Get custom information about the mouse position on mousedown
customMouseTrigger : Decoder a -> (Msg -> a -> msg) -> VirtualDom.Property msg
Allow draggable elements to have key
s 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
Delta
now uses floatsThis change was made because it seems to be more common to need floats when handling positions:
Actual changes:
Delta
alias to (Float, Float)
.deltaToFloats
- no longer needed. Also, did not feel like a "mirror" deltaToInts
would have been that useful for the common case.keyed
APIVersion 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 key
s 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
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
]