Generic low-level click and drag utility for DOM events. Normalizes mouse and touch events and handles clicking outside of the element.
var drag = require('clickdrag')(element, { touch: true })
drag.on('start', startHandler) //touchstart / mousedown
drag.on('move', moveHandler) //touchmove / mousemove + move outside
drag.on('end', stopHandler) //touchend / mouseup + up outside
drag = clickdrag(element[, options])
Creates a new draggable emitter for the given element.
Options:
parent
the element or document to attach mouse outside events, defaults to document
touch
whether to listen for touchstart
, touchend
, touchmove
and emit the normalized start
, move
, and end
events. Defaults to false (i.e. mouse
events only).drag.enabled
Boolean, default true. If set to false, events will be ignored.
drag.element
The element passed into the constructor.
drag.dispose()
Disposes the listeners, removing them from the DOM elements, and removing references to element
.
drag.on('start')
drag.on('move')
drag.on('end')
The start (mousedown), move (mousemove and mousemove outside), and end (mouseup and mouseup outside) events.
Each is emitted with the parameters (event, offset, delta)
. The event
is the original MouseEvent. The offset
is an object with x
and y
values, relative to the element you passed at constructor. The delta
has x
and y
delta from where the drag start originated (for start
events it will be {0, 0}
).
Note: Keep in mind that the MouseEvent's target
may not match the element passed to the constructor, since the mousemove/mouseup events need to be triggered on its parent (or the document).
MIT, see LICENSE.md for details.