Skip to content
Lightweight jQuery plugin to create draggables and droppables using native HTML5 drag and drop API.
JavaScript HTML
Find file
New pull request
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.

Something went wrong with that request. Please try again.