This Javascript package implements drag-n-drop functionality in a browser.


Tested in the following browsers: IE 6.0, FF 17, Chrome 22, Safari 5.1.1

Dragdrop.js requires Event.js package, which can be acquired at the following links:

JS Classes

Basic usage

Once initialized, Dradrop.js will apply drag-n-drop functionality to all HTML elements with class="draggable":

var evt         = new Event(),
    dragdrop    = new Dragdrop(evt);
Basic example

Advanced usage

To implement advanced options an element should be attached to Dragdrop.js, it can be done using set method:

var evt         = new Event(),
    dragdrop    = new Dragdrop(evt),
    something   = document.getElementById('something');

dragdrop.set(something, {
    mode: 0,
    minX: 50,
    maxX: 350,
    minY: 50,
    maxY: 350,
    snap: 5,
    onstart: function(element) {
        // do something here
    onmove: function(element) {
        // do something here
    onstop: function(element) {
        // do something here

which takes 2 arguments, first is the DOM element to be dragged, and the second is the options object which could have the following properties and values:

All handlers receive DOM node as argument

Some examples:

Move the element:

var evt         = new Event(),
    dragdrop    = new Dragdrop(evt),
    horizontal  = document.getElementById('horizontal'),
    vertical    = document.getElementById('vertical'),
    hLimited    = document.getElementById('horizontal-limited'),
    hSnapped    = document.getElementById('horizontal-snapped');

dragdrop.set(horizontal, {mode: 1});
dragdrop.set(vertical, {mode: 2});
dragdrop.set(hLimited, {mode: 1, minX: 50, maxX: 250});
dragdrop.set(hSnapped, {mode: 1, snap: 50});
Horizontally Limited
Horizontally Snapped

For more examples please refer to demo scripts provided with the package.