High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package
npm install draggableHigh performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package.
http://bcherny.github.io/draggable/demos/basic/
HTML
``html`
JavaScript
Using browser globals:
`js`
var element = document.getElementById('id');
var options = {
grid: 10,
onDrag: function(){ ... }
};
new Draggable (element, options);
Using AMD/CommonJS:
`js`
var Draggable = require ('Draggable');
var element = document.getElementById('id');
new Draggable (element);
None!
| Option | Type | Default | Description |
|-------------------|---------------------|---------|-----------------------------------------------------------------------|
| grid | Number | 0 | grid size for snapping on drag |Element
| handle | | null | the handle of the draggable; if null, the whole element is the handle |Function(target)
| filterTarget | | null | prevent drag when target passes this test |Element
| limit | , Function(x, y, x0, y0), or Object | { x: null, y: null } | limit x/y drag bounds |Number
| threshold | | 0 | threshold before drag begins (in px) |Boolean
| setCursor | (truthy) | false | change cursor to move? |Boolean
| setPosition | (truthy) | true | change draggable position to absolute? |Boolean
| smoothDrag | (truthy) | true | snap to grid only when dropped, not during drag |Boolean
| useGPU | (truthy) | true | move graphics calculation/composition to the GPU? (modern browsers only, graceful degradation) |
| Event | Arguments |
|-----------------|-------------------------|
| onDrag | element, x, y, event |element, x, y, event
| onDragStart | |element, x, y, event
| onDragEnd | |
| Method | Arguments | Returns | Description
|---------------|-----------------------------------------|-----------------------|-------------------------------------------|
| get | --- | {Object} {x, y} | Get the current coordinates |{Number}
| set | x, {Number} y | instance | Move to the specified coordinates |{String}
| setOption | property, {Mixed} value | instance | Set an option in the live instance |
| destroy | --- | --- | Unbind the instance's DOM event listeners |
Options.limit accepts arguments in several forms:
`js
// no limit
limit: null
// limit x, but leave y unbounded
limit: {
x: [1,10],
y: null
}
// limit both axes
limit: {
x: [1,10],
y: [1,500]
}
// bound x, set y to a constant
limit: {
x: [1,10],
y: 5
}
// bound with an element
limit: document.getElementById('id')
// bound with a custom function
limit: function (
x, // current X coordinate
y, // current Y coordinate
x0, // original X coordinate (where drag was started)
y0 // original Y coordinate (where drag was started)
) {
var radius = 100,
dx = x - x0,
dy = y - y0,
distance = Math.sqrt(dxdx + dydy),
// 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
};
}
``
- 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
- Improve performance on old iOS
- Unit tests