JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Draggable.js

    Make your DOM elements draggable easily
    Filed under 

    • 🔾13%Overall
    • 121
    • 52.1 days
    • 🕩27
    • 👥8

    draggable.js Build Status codecov.io Bitdeli Badge

    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
    mocha npm install mocha

    License

    This is licensed under the feel-free-to-do-whatever-you-want-to-do license.

    Show All