Lightweight jQuery plugin to create draggables and droppables using native HTML5 drag and drop API.
JavaScript HTML
Pull request Compare This branch is 16 commits ahead, 11 commits behind farhadi:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

HTML5 Drag & Drop jQuery Plugin

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+.


Draggable Specific

Use draggable method to create a draggable element:


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:

    handle: 'h2'

Droppable Specific

Use droppable method to create a droppable element:


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

Use accept option to restrict items accepted by the 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.

    addClasses: true,
    activeClass: 'active' // Optional. Default: 'droppable-active'.
    hoverClass: 'hover' // Optional. Default: 'droppable-hover'.

To remove the draggable or droppable functionality completely:


To disable the draggable or droppable temporarily:


To enable a disabled draggable or droppable:


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

    test: Modernizr.draganddrop,
    yep: 'jquery.dragdrop.js',
    nope: 'jquery-ui.min.js',
    complete: function() {


Released under the MIT license.