Based on html5sortable (GitHub) by Ali Farhadi

• Less than 2.5KB (minified and gzipped).
• Built using native HTML5 drag and drop API.
• Similar API and behaviour to jquery-ui draggable and droppable plugin.
• Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.

Use draggable method to create a draggable element:

$('.draggable').draggable();

Use .draggable and .draggable-dragging CSS selectors to change the styles of a dragging item.

Use handle option to restrict drag start to the specified element:

$('.draggable').draggable({
    handle: 'h2'
});

Use droppable method to create a droppable element:

$('.droppable').droppable();

Use .droppable CSS selectors to change the style of a droppable.

Use accept option to restrict items accepted by the droppable:

$('.droppable').droppable({
    accept: '.some-draggable'
});

Use addClasses to have the activeClass added to the droppable when an accepted item starts dragging and hoverClass added when the item is above the droppable.

$('.droppable').droppable({
    addClasses: true,
    activeClass: 'active' // Optional. Default: 'droppable-active'.
    hoverClass: 'hover' // Optional. Default: 'droppable-hover'.
});

To remove the draggable or droppable functionality completely:

$('.draggable').draggable('destroy');
$('.droppable').droppable('destroy');

To disable the draggable or droppable temporarily:

$('.draggable').draggable('disable');
$('.droppable').droppable('disable');

To enable a disabled draggable or droppable:

$('.draggable').draggable('enable');
$('.droppable').droppable('enable');

The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:

yepnope({
    test: Modernizr.draganddrop,
    yep: 'jquery.dragdrop.js',
    nope: 'jquery-ui.min.js',
    complete: function() {
        $('.draggable').draggable();
        $('.droppable').droppable();
    }
});

Released under the MIT license.