jQuery.Drag  class     

Provides drag events as a special events to jQuery.
A jQuery.Drag instance is created on a drag and passed as a parameter to the drag event callbacks. By calling methods on the drag event, you can alter the drag's behavior.

Drag Events

The drag plugin allows you to listen to 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

Just by binding or delegating on one of these events, you make the element dragable. You can change the behavior of the drag by calling methods on the drag object passed to the callback.

Example

Here's a quick example:

//makes the drag vertical
$(".drags").live("draginit", function(event, drag){
  drag.vertical();
})
//gets the position of the drag and uses that to set the width
//of an element
$(".resize").live("dragmove",function(event, drag){
  $(this).width(drag.position.left() - $(this).offset().left   )
})

Drag Object

The drag object is passed after the event to drag event callback functions. By calling methods and changing the properties of the drag object, you can alter how the drag behaves.

The drag properties and methods:

• cancel - stops the drag motion from happening
• ghost - copys the draggable and drags the cloned element
• horizontal - limits the scroll to horizontal movement
• location - where the drag should be on the screen
• mouseElementPosition - where the mouse should be on the drag
• only - only have drags, no drops
• representative - move another element in place of this element
• revert - animate the drag back to its position
• vertical - limit the drag to vertical movement
• limit - limit the drag within an element (*limit plugin)
• scrolls - scroll scrollable areas when dragging near their boundries (*scroll plugin)

Demo

Now lets see some examples:

Constructor

new $.Drag() -> jquery.drag