-
Draggable - [script.aculo.us]
2008-02-25
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();用该方法你可以随时激活或者禁止对象的拖曳。
随机文章:
Sortable.create 2008-03-13Sortables 2008-03-10Droppables.remove 2008-03-10Droppables.add 2008-03-04Droppables 2008-03-04
收藏到:Del.icio.us
Sortable.create
Blog:摄氏零度以后...2008-03-13 15:40:36Draggables
Blog:摄氏零度以后...2008-03-04 12:07:38
引用
下面Blog引用了该文: