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.