Jquery ui 遏制 x1, x2

Question

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

我不明白：

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

似乎距离是根据文档而不是可拖动对象的父项计算的？有人可以解释它是如何工作的吗？

 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 ] }
  
);

#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;
}

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

Answer 1

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

选择器
元素
字符串
数组

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

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

示例here。物体可以在100*100px

的正方形上移动

如果你设置这个containment: "parent"

物体只能在灰色边框内移动

Jquery ui 遏制 x1, x2

Jquery ui containment x1, x2

jquery

jquery-ui