Fork me on GitHub

1.Basic use

var box = document.getElementById('dragBox');

Draggable(box);

2.Set elements positioned, which will trigger the transition effect in CSS3

var box = document.getElementById('dragBox');

Draggable(box, {
    positioned: true
});
var box = document.getElementById('dragBox');

Draggable(box, {
    positioned: false
});

3.Set draggable area on every element

var box = document.getElementById('dragBox');

Draggable(box, {
    dragElements: box.getElementsByTagName('div')
});

4.Add callback functions which will call on drag and drop events

var box = document.getElementById('dragBox');

Draggable(box, {
    onDrag: function(dragIndex, cloneElem){
        console.log("from:", dragIndex);

        cloneElem.style.opacity = 0.5;
        cloneElem.style.filter = "alpha(opacity=50)";
    },
    onDrop: function(dropIndex, dropElem){
        console.log("to:", dropIndex);
    }
});

5.Performance Test

  

Draggable.js