Jquery ui的draggable插件让某个元素能被鼠标拖拽。
draggable和droppable的区别:
draggable只是控制拖拽,如果你要控制拖拽和放下两个动作,你需要使用的是droppable插件
draggable有三个事件可以定义回调函数:
start, stop, drag
这三个事件定义的回调函数可以有两个参数,一个是原始的浏览器定义的事件,另一个是插件定义的事件,假定为ui
ui拥有的属性有:
ui.helper
ui.position
ui.offset
drag的动作的时候可以设置helper,就是在拖动的时候鼠标旁边显示的提示工具条
draggable的属性有:
disabled: 是否设置此属性可拖拽
addClass:当设置为false的时候,ui-draggable这个class就不会加到上面
appendTo: 指示draggable的时候的helper的container
axis:允许的值是x或者y,限定拖拽只能在x轴变化和只能在y轴变化
connectToSortable:
containment: 拖拽元素所在的容器
cursor: 拖拽的时候鼠标样式
cursorAt: 设置helper相对于鼠标的位置
delay: 设置拖拽动作生效的延迟时间
distance: 设置拖拽动作生效的延迟距离
grad:拖动过程中鼠标移动的单位
helper: helper显示设置
iframeFix:解决拖动过程中与iframe层叠后的事件问题
opacity:设置helper的透明度
refreshPositions: 是否重新计算位置
revert:设置拖拽回复到原始位置
revertDuration:拖拽回复到原始位置的延迟时间
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标
本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/archive/2012/07/27/2611038.html,如需转载请自行联系原作者