- ×
Make your DOM elements draggable easily
Filed under user interfaceShow Alldraggable.js
Make your DOM elements draggagle easily
Examples
DOM:
<div id="elementToDrag"> <div class="handle"></div> </div>
To make the whole element draggable:
var elementToDrag = document.getElementById('elementToDrag'); draggable(elementToDrag);
To make it draggable only when dragging the handle element:
var elementToDrag = document.getElementById('elementToDrag'); var handle = elementToDrag.getElementsByClassName('handle')[0]; draggable(elementToDrag, handle);
Notes
- You have to provide the raw element, not the one wrapped by your favorite dom query lib. Using jQuery, for example, you'd need to do something like
var elementToDrag = $('#elementToDrag').get(0);
- If you are using AMD (e.g. require.js) this lib becomes a module. Otherwise it'll create a global
draggable
.
Browser Compatibility
I've ran the tests in Chrome and Firefox. On travis-ci the tests run in Phantomjs. If you find any incompatibility or want to support other browsers, please do a pull request with the fix! :-)
Development
Prerequisites
phantomjs
mochanpm install mocha
License
This is licensed under the feel-free-to-do-whatever-you-want-to-do license.
- You have to provide the raw element, not the one wrapped by your favorite dom query lib. Using jQuery, for example, you'd need to do something like