Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Lightweight jQuery plugin to create draggables and droppables using native HTML5 drag and drop API.
JavaScript HTML
branch: master

This branch is 16 commits ahead, 10 commits behind farhadi:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
index.html
jquery.dragdrop.js

README.md

HTML5 Drag & Drop jQuery Plugin

Based on html5sortable (GitHub) by Ali Farhadi

Demo

Features

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

Usage

Draggable Specific

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'
});

Droppable Specific

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();
    }
});

License

Released under the MIT license.

Something went wrong with that request. Please try again.