Jquery ui包含x1，x2

Question

我研究了与收容有关的jQuery ui文档： http://api.jqueryui.com/draggable/#option-containment

我不明白：

{ containment: [ x1, y1, x2, y2 ] }

似乎距离是根据文件而不是可拖动的父母来计算的？有人能解释它是如何工作的吗？

＆＃13;

＆＃13;

	var x1 = 0; // farthest to left it can go?
	var x2 = 100; // farthest to right it can go?
	var y1 = 0; // farthest to top it can go?
	var y2 = 0; // farthest to bottom it can go?

$( ".blue" ).draggable(
	{ axis: "x" },
		
	{ containment: [ x1, y1, x2, y2 ] }
		
);

＆＃13;

#parent {
	position:relative;
	margin:0 auto;
	width:300px; height:300px;
	border: 1px #ccc solid;
}

.blue { 
	float:left;
	display:inline-block;
	width:30px; height:30px;
	margin:10px;
	background:blue;
	cursor:pointer;
}

＆＃13;

<div id="parent">
	<div class="blue"></div>
    <div class="blue"></div>
    <div class="blue"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于收容，您有4个选项，如文档所述

• 的选择
• 的元素
• 的字符串
• 的阵列

对于数组选项，您可以设置对象可以移动的坐标（形成正方形或矩形）。

示例：containment: [ 0, 0, 100, 100 ]，是100 * 100px的正方形。在这个区域，物体可以移动

示例here。物体可以在100 * 100px的方格上移动

如果您设置此containment: "parent"

对象只能在带有灰色边框的方块内移动