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?. Thedraggable.elementproperty is a reference to the DOM element being dragged.event, the DOM Event object
