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.
|