draggy.js
What is it?
draggy.js is a small JavaScript library for creating draggable elements. It has been especially designed for JavaScript applications (sinle-page apps) where DOM elements might be removed but state should be preserved.
draggy.js has no JavaScript dependencies, but require browsers to support CSS3 transform (translate).
How do I use it?
Add draggy.js to your html page(s) and call the Draggy constructor when you want to make an element draggable.
Use the configuration options to set up boundaries and restrictions, and then the API to manipulate it.
Where can I use it?
- 17
- 9
- 11
- 5
- 9
Constructor
You use the following syntax to create a new draggy object:
new Draggy(element, config)
PARAMETERS
- element (required)
- DOM element or id of the draggy object
- config (optional)
- Optional configuration object
Configuration Options
Following configuration options are available when creating the draggy object:
bindTo (string or element)- DOM element (or id of) to which the draggy object is constrained by
limitsX (array with start and end values (numbers))- Manual setting limiting horizontal movement
limitsY (array with start and end values (numbers))- Manual setting limiting vertical movement
onChange (function)- Callback that will be called when the object is dragged
restrictX (boolean)- Make it impossible to move the object horizontally
restrictY (boolean)- Make it impossible to move the object vertically
API
Once a draggy object has been created it can be manipulated with the following API:
ele- Returns the DOM element of the draggy object
position- Current position of the element. Returns array with x and y value
bind(element)- Restrict draggy object to boundaries of an element
destroy()- Remove Draggy from element. Should be called before removing element from DOM.
disable()- Disable dragging functionality of object
enable()- Enable dragging functionality of object
moveTo(x, y)- Move the object to supplied x and y values. Will not call onChange callback or dispatch the onDrop event
reInit()- Called when it is necessary to recreate state. Will set object to last position, call onChange callback and dispatch the onDrop event
reset()- Reset object to starting point. Will not call onChange callback or dispatch the onDrop event
setTo(x, y)- Move the object to supplied x and y values. Will call onChange callback and dispatch the onDrop event
Events
onDrag- Called when dragging elemement
onDrop- Called when releasing element
Draggy will dispatch a custom events when a draggy object is dragged or released. The event is dispatched from the active element, and this element will contain information about position and also a reference back to the draggy object.
This means that in an event listener for onDrop, the event.target will be the dragged element. From this element you can find out the position, event.target.position, and the draggy object, event.target.draggy.
Examples
No configuration
If providing no configuration, the elements will be freely draggable.
Bind to element
When binding to an element the draggy object will be restricted to move within the element's boundaries.
Restriced to horizontal movement
It is possible to restrict movement to horizontal or vertical only.
