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.