Question

jquery如何设置拖动的活动范围？

Answer 1

jquery的拖动函数有个参数控制这个，有很多活动范围可选择，如下：

1.containment:

[类型]选择器, 元素, 字符串, 数组.

选择器: 只能在选择器约束的元素内拖动

元素: 只能在给定的元素内拖动

2.字符串:

parent: 只能在父容器内拖动

document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条

widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...

3.数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.

false: 不限制拖动的活动范围

[默认值]false

[产生影响]

影响指定可拖动控件的活动区域.

[代码示例]

[初始化]

$('.selector').draggable({ containment: 'parent' });

[获取属性值]

var containment = $('.selector').draggable('option', 'containment');

[设置属性值]

$('.selector').draggable('option', 'containment', 'parent');