Are you looking for how to make an element Draggable?
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 |
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 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.