Draggable

 

Draggable

为了让一个对象能够被拖拽，你可以简单的创建一个Draggable类的实例来实现，或者为一个附加的内置功能添加Sortable类。

表达式：

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

一些options参数表：

Option	Default	Description
handle	(none)	设置触发该拖拽的对象，默认为对象本身，也可以是其他的对象，ID，或者CSS选择符所指定的对象。
revert	false	如果设置为真，则当拖拽结束时对象将回答其原始的位置。也可以设置一个回调函数，当拖拽结束的时候触发。
snap	false	可以设置为一个由数组[x,y]作为步长的移动方式，还可以用function(x,y){ return [x,y] }形式返回移动步长。
zindex	1000	设置被拖拽对象的CSS z-index值。
constraint	(none)	如果设置为 'horizontal' 或者 'vertical'，则被拖曳对象的移动范围将被锁定在水平或者竖直方向。
ghosting	false	克隆一个被拖拽对象，将原对象留在原地，对克隆对象进行拖曳直到完成，原对象再覆盖克隆对象。
starteffect	Opacity	设置拖曳开始时的Effect效果。
reverteffect	Move	当revert选项为true时，设置被拖曳对象返回原坐标时的Effect效果。
endeffect	Opacity	设置拖曳结束时的Effect效果

options参数同样能够支持以下的回调函数：

Callback	Description
onStart	当拖曳开始时触发。
onDrag	在拖曳进程中触发。
change	onDrag时调用？
onEnd	拖曳结束时触发。

除了“change”回调函数外，其他的函数在回调时接收2个参数：被拖拽的对象及mouse的event对象。

下面来看两个DEMO：

// 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'});

如需禁止一个拖曳，则可以将实例赋予一个变量，代码如下：

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

用该方法你可以随时激活或者禁止对象的拖曳。