Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Lightweight jQuery plugin to create draggables and droppables using native HTML5 drag and drop API.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
Octocat-spinner-32 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.