jQuery UI可拖动的包含偏移量

Question

我有一个800x400px的div，在里面有一个20x20px的div。

我正在使用带有包含选项的jQuery UI Draggable，但是我需要从父div的侧面偏移20px。

因此，可拖动区域实际上应该是760x360px，以800x400px为中心。

我知道我可以使用另一个div，使其达到该大小并在其中放置较小的那个，但是我需要一个不涉及创建另一个div的解决方案。

这可能吗？ 提前致谢！

编辑 ：我不能在父元素上使用填充，因为我拖动的div是绝对定位的。

Answer 1

jQuery UI Draggable containment选项可以接受多种类型的输入。

支持多种类型：

• 选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。 如果未找到任何元素，则不会设置任何围堵。

• 元素：可拖动元素将包含在此元素的边界框中。

• 字符串 ：可能的值： "parent" ， "document" ， "window" 。

• Array ：以[ x1, y1, x2, y2 ]的形式定义边界框的数组。

因此，这意味着您可以获取容器对象的[x,y]或[left,top] ，然后计算包含数组。

 function getContainment($box, $drag, space) { var x1 = $box.offset().left + space; var y1 = $box.offset().top + space; var x2 = $box.offset().left + $box.width() - $drag.width() - space; var y2 = $box.offset().top + $box.height() - $drag.height() - space; return [x1, y1, x2, y2]; } $("#draggable").draggable({ containment: getContainment($(".container"), $("#draggable"), 20) }); 

 .container { width: 800px; height: 400px; position: relative; margin-top: 40px; background: #CCC; } #draggable { width: 100px; height: 100px; background: #FFF; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container"> <div id="draggable">Drag me</div> </div>