draggable
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package.
Demo
http://bcherny.github.io/draggable/demos/basic/
Usage
HTML
JavaScript
Using browser globals:
var element = document;var options = grid: 10 { ... }; element options;
Using AMD/CommonJS:
var Draggable = ;var element = document; element;
Dependencies
None!
Options
Option | Type | Default | Description |
---|---|---|---|
grid | Number |
0 |
grid size for snapping on drag |
handle | Element |
null |
the handle of the draggable; if null, the whole element is the handle |
filterTarget | Function(target) |
null |
prevent drag when target passes this test |
limit | Element , Function(x, y, x0, y0) , or Object |
{ x: null, y: null } |
limit x/y drag bounds |
threshold | Number |
0 |
threshold before drag begins (in px) |
setCursor | Boolean (truthy) |
false |
change cursor to move ? |
setPosition | Boolean (truthy) |
true |
change draggable position to absolute ? |
smoothDrag | Boolean (truthy) |
true |
snap to grid only when dropped, not during drag |
useGPU | Boolean (truthy) |
true |
move graphics calculation/composition to the GPU? (modern browsers only, graceful degradation) |
Events
Event | Arguments |
---|---|
onDrag | element, x, y, event |
onDragStart | element, x, y, event |
onDragEnd | element, x, y, event |
Instance methods
Method | Arguments | Returns | Description |
---|---|---|---|
get | --- | {Object} {x, y} |
Get the current coordinates |
set | {Number} x, {Number} y |
instance | Move to the specified coordinates |
setOption | {String} property, {Mixed} value |
instance | Set an option in the live instance |
destroy | --- | --- | Unbind the instance's DOM event listeners |
Notes
Options.limit accepts arguments in several forms:
// no limitlimit: null // limit x, but leave y unboundedlimit: x: 110 y: null // limit both axeslimit: x: 110 y: 1500 // bound x, set y to a constantlimit: x: 110 y: 5 // bound with an elementlimit: document // bound with a custom function { var radius = 100 dx = x - x0 dy = y - y0 distance = Math // only allow dragging within a circle of radius 100 outOfRange = distance > radius; // if our point is outside of the circle, compute the // point on the circle's edge closest to our point if outOfRange x = x0 + radius * x - x0 / distance; y = y0 + radius * y - y0 / distance; return x: x y: y ; }
Tested on
- Chrome 29 on OSX
- Chrome 28 on Windows
- Firefox 23 on OSX
- Firefox 21 on Windows
- Opera 16 on OSX
- Safari 6 on OSX
- Safari 6 on iPhone4/iOS6
- Safari 6 on iPhone5/iOS6
- Safari 6 on iPad2/iOS6
- Safari 6 on iPad3/iOS6
- Internet Explorer 8-10 on Windows
To do
- Improve performance on old iOS
- Unit tests