To make an element draggable, you create a new instance of class Draggable. Or for additional built-in functionality, make a Sortable instead.

Syntax


  new Draggable('id_of_element',[options]);

Possible options are:

Option since Default Description
handle V1.0 (none) Sets whether the element should only be draggable by an embedded handle. The value must be an element reference or element id.
handle V1.5 (none) As above, except now the value may be a string referencing a CSS class value. The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.
revert V1.0 false If set to true, the element returns to its original position when the drags ends.
revert V1.5 false Revert can also be an arbitrary function reference, called when the drag ends.
snap V1.5 false If set to false no snapping occurs. Otherwise takes the forms – xy or [x,y] or function(x,y){ return [x,y] }.
zindex V1.5 1000 The css zindex of the draggable item.
constraint V1.0 (none) If set to ‘horizontal’ or ‘vertical’ the drag will be constrained to take place only horizontally or vertically.
ghosting ?? false Clones the element and drags the clone, leaving the original in place until the clone is dropped.
starteffect ?? Opacity Defines the effect to use when the draggable starts being dragged.
reverteffect ?? Move Defines the effect to use when the draggable reverts back to its starting position.
endeffect ?? Opacity Defines the effect to use when the draggable stops being dragged.

Additionally, the options parameter accepts any of the following callback functions:

Callback Description
onStart Called when a drag is initiated.
onDrag Called repeatedly a mouse moves, if mouse position changed from previous call.
change Called just as onDrag (which is the preferred callback). Gets the Draggable instance as its parameter.
onEnd Called when a drag is ended.

Except for the “change” callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.

Examples


 // from the shopping cart demo
 new Draggable('product_1',{revert:true});

 // constrain direction and give a handle
 new Draggable('my_div',{constraint:'horizontal',handle:'handle'});

To disable draggables later on, store it in a variable like:


 var mydrag = new Draggable('product_1', {revert:true})
 (... do stuff ..)
 mydrag.destroy();

This way, you can enable and disable dragging at will.

Demos

Click for draggable demo.
Default options.
Click for draggable demo.
{snap:[40,40], revert:true}