TweetDelegate-able Drag-Drop Events for jQuery

Have you ever wanted to use live and delegate with drag-drop events? Now you can! We are releasing JavaScriptMVC’s delegate-able drag/drop plugins and extensions. These plugins only work for the current 1.4.3 nightly release.

Download

• jquery.event.drag.js (minified 9kb)- drag events
• jquery.event.drop.js (minified 4kb) - drop events
• jquery.event.drag.limit.js (minified1kb)- limit drag movement inside another element
• jquery.event.drag.scroll.js (minified 1kb)- drags scroll scrollable areas

Features

• Use drag-drop events with live, delegate, and bind.
• Supports nested drop elements (if you have drops inside other drops).
• Lots of events make customizing behavior very easy.
• Drop position caching for fast performance.
• Easily modify drag-drop behavior.

Demos

• jQuery.Drag
• jQuery.Drop

Documentation

• jQuery.Drag
• jQuery.Drop

Use

jQuery 1.4’s live and delegate methods made event delegation an extremely attractive technique for attaching event handlers. The $.EVENT.SPECIAL.DRAG plugin works great, but it doesn’t let you use delegate. $.Drag and $.Drop provides delegate-able drag/drop events.

Drag Events

Create a drag element by binding or delegating with the following events:

• dragdown - the mouse cursor is pressed down
• draginit - the drag motion is started
• dragmove - the drag is moved
• dragend - the drag has ended
• dragover - the drag is over a drop point
• dragout - the drag moved out of a drop point

Example:

// makes the drag vertical
$(".drags").live("draginit", function(event, drag){
  drag.vertical();
})

// adds an over class when the drag moves over a drop
$("#drag").bind("dragover", function(event, drag){
  $(this).addClass('over')
})

Drop Events

Create a drop element by binding or delegating with the following events:

• dropinit - the drag motion is started, drop positions are calculated.
• dropover - a drag moves over a drop event.
• dropout - a drag moves out of the drop.
• dropmove - a drag is moved over a drop.
• dropon - a drag is released over a drop.
• dropend - the drag motion has completed.

Example:

// adds a drop-over style when a drag moves over this drop
$('.drop').live("dropover", function(ev, drop, drag){
  $(this).addClass("drop-over")
})

// cleans up a drop after the drag has stopped
$("#trash").bind("dropend", function(){
  $(this).removeClass("openLid")
})