Draggable.js

Make your DOM elements draggable

It always goes like this:

You need to do a small and specific thing in your brand new toy project. Then you google a little, dig GitHub and find nothing. So you go ahead and write your own tiny little lib. When you are about to make it public, you stumble upon a lib that does exactly what you needed. Dammit! Too late...

Anyway, here it is. A library that makes your life easier when you want your elements do be draggable. Take a look at a few examples:

#free_bounds


var free_bounds = document.getElementById('free_bounds');
draggable(free_bounds);

#with_handle


var with_handle = document.getElementById('with_handle');
draggable(with_handle, with_handle.getElementsByTagName('span')[0]);

#events


var events = document.getElementById('events');
var info = events.getElementsByTagName('p')[0];
draggable(events);
function setInfo(type) {
    return function(event) { info.innerHTML = type + ': ' + event.x + ', ' + event.y; }
}
events.whenDragStarts(setInfo('Start'));
events.whenDragging(setInfo('Dragging'));
events.whenDragStops(setInfo('Stop'));

Unit Tests (source):