刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能。
一、drappable
1、回调函数
有start, stop, drag等事件,这些函数都接受两个参数:event和ui。
event: 浏览器原生的事件 ; ui: 一个JQuery的ui对象。
其中ui 有以下属性:
a) ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
b) ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
c) ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)
(1) start: 拖动开始, 指鼠标按下, 开始移动.
(2) drag: 拖动过程中鼠标移动.
(3) stop: 拖动结束.
[代码示例]
初始化时设置事件.
$('.selector').draggable({
start: function(event, ui){ alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});
2、常用参数(选项)
(1)addClasses: [类型]Boolean(布尔值) [默认值]true
[产生影响]
用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
true表示ui-draggable样式被添加到该元素.
false表示ui-draggable样式不被添加到该元素.
[代码示例]draggable其他选项的初始化,
$('.selector').draggable({ addClasses: false });
将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式
(2)appendTo: [类型]Element, Selector(HTML元素对象或选择器) [默认值]'parent' 父元素
[产生影响]
用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.
[代码示例]
$('.selector').draggable({ appendTo: 'body' });
(3)axis:
[类型]String, Boolean(可取的值有'x', 'y', false)
'x': 只能水平拖动
'y': 只能垂直拖动
false: 既可以水平, 也可以垂直拖动.
[默认值]false, 不限制拖动的方向
[产生影响]
约束拖动过程中的取向.
[代码示例]
$('.selector').draggable({ axis: 'x' });
(4)containment:
[类型]选择器, 元素, 字符串, 数组.
选择器: 只能在选择器约束的元素内拖动
元素: 只能在给定的元素内拖动
字符串:
parent: 只能在父容器内拖动
document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
false: 不限制拖动的活动范围
[默认值]false