Draggable

To make an element draggable, you create a new instance of class Draggable.

Syntax

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

Options

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 can take the following callback function:

Callback | Description
change | Called whenever the Draggable is moved by dragging. The called function gets the Draggable instance as its parameter.

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.