Draggables Object

Are you looking for how to make an element draggable?

Draggables Object

The Draggables object is a global helper object. In most cases you will not need to use or modify the Draggables object, except when adding/removing custom drag observers.

Property/Method Description
drags Array of all Draggables on the page
observers Array of drag observers. Use Draggables.addObserver() and Draggables.removeObserver() to add/remove observers, respectively.
register() function(draggable). Called when you create a new Draggable?. If this is the first Draggable on the page, starts observing mouse events necessary for dragging.
unregister() function(draggable). Called by Draggable.destroy()?. Stops observing window mouse events if Draggable.drag is empty.
activate() Marks a particular Draggable as the activeDraggable
deactivate() Sets Draggables.activeDraggable to @null
updateDrag() Passes the window mousemove event to the @activeDraggable@’s updateDrag function.
endDrag() Caught by the window’s mouseup, stops dragging the activeDraggable, if any, via its endDrag function.
keyPress() Passes the window keypress event to the @activeDraggable@’s keyPress function.
addObserver() Adds an observer to Draggables.observers
removeObserver() Removes an observer from Draggables.observers. Takes the observer’s element property as a parameter
notify() Calls the observers’ onStart(), onEnd(), and onDrag() functions as necessary

Draggable Observers

A draggable observer, as used in Draggables.addObserver(), is an object with an element property defined, and one or more of the following functions defined:

onStart() called after drag begins
onDrag() called on each mousemove during a drag
onEnd() called when drag is finished

The parameters passed to these three events are

  • eventName, one of 'onStart', 'onEnd', 'onDrag'
  • draggable, a reference to the Draggable?. The draggable.element property is a reference to the DOM element being dragged.
  • event, the DOM Event object