Draggables

The Draggables object is a global helper object.

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:

Property/Method | Description
onStart() | Called after dragging begins
onDrag() | Called on each mousemove during a drag
onEnd() | Called when dragging is finished

The parameters passed to these three events are eventName, draggable, and event. The draggable.element method gives us the html element being dragged.