Question

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

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

所以可拖动区域应该是760x360px，以800x400px为中心。

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

这可能吗？提前谢谢！

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

Answer 1

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

支持多种类型：



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



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



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



数组：定义[ 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>

jQuery UI可拖动包含偏移量

1 个答案: