Script.aculo.us开发系列(八):使用DropDrag定义拖拽行为

核心提示：在不同的浏览器上默认的拖拽能解决的问题相当少,所以有很多的框架都能实现这么个功能.使用拖拽行为能很好的改善用户体验,尤其是在购物的时候能让用户感到很新奇和体面.Script.aculo.us使用了三个类实现拖拽和排序,它们是Draggable,Droppable,Sortable.要实现一个完整的拖拽行为,需要Drag

在不同的浏览器上默认的拖拽能解决的问题相当少,所以有很多的框架都能实现这么个功能.使用拖拽行为能很好的改善用户体验,尤其是在购物的时候能让用户感到很新奇和体面.Script.aculo.us使用了三个类实现拖拽和排序,它们是Draggable,Droppable,Sortable.要实现一个完整的拖拽行为,需要Draggable,和Droppable的配合使用,由于这连个类的方法比较多,我只选取比较实用的几个方法进行介绍.还是老规矩,先看看Demo:http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/DragDrop.html

Draggable

new Draggable("DraggableId"[,options])

主要选项

snap:推拽的最小单位,默认为false,可以是数组或者函数,将这个属性设置为[50,50],意味着最小的位移单位是50px,50px,如果设置为一个函数,这个函数的参数为(x,y),这个x,y指示当前的绝对坐标,函数应该返回二维数组,上面的例子中的Drag(UnAcceptable)推拽到页面的左上角是就会"吸附"上去,就是因为函数的作用,详细见源码

revert:推拽完毕之后是否回到原来的位置,默认为false,也可以是一个函数,这个函数必须返回true/false

handle:"提手",移动整个块的时候通常不需要在整个块的区域都可以拖拽,比如移动一个栏目,通常只需要拖拽标题(比如Google的个性化主页),将该属性设置为标题的Id

ghosting:推拽的过程中是否显示"影子",默认为false

constraint:限制能拖动的方向,默认的两个方向都可以,可以设置为"vertical","horizontal"的任意

zindex:"影子"的z-Index属性

scroll:拖拽出视图范围是否显示自动滚动

scrollSensitivity/scrollSpeed:默认值分为为20/15,控制滚动的敏感度和滚动速度