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();
用该方法你可以随时激活或者禁止对象的拖曳。