包含到父级的JQuery Draggable和额外的一个

Question

可拖动的文档显示，我们可以使用父容器来限制元素可以拖动到的位置。看来可拖动元素被约束到另一个元素。

是否可以将父级扩展“一点”？ （我将更详细地解释）。

当我们限制为父对象时，可拖动元素必须保留在内部：

我希望它能够执行以上操作，或者至少根据下一个屏幕快照与父母保持联系

我的努力（在上面的小提琴中）很差，因为它仅显示了如何使用可拖动。

$( "#draggable" ).draggable({containment:"parent"});

JSFIDDLE

Answer 1

我假设您的问题更像是我如何如上所示约束可拖动对象。答案是使用替代元素或按Array。

containment类型：Selector或Element或String或Array

限制拖动到指定元素或区域的范围内。支持多种类型：

• Selector：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果未找到任何元素，则不会设置任何遏制。
• Element：可拖动元素将包含在此元素的边界框中。
• String：可能的值："parent"，"document"，"window"。
• Array：一个定义边界框的数组，格式为[ x1, y1, x2, y2 ]。

因此，在初始化Draggable之前，我们可以构建相对于目标对象和要拖动的项目的点数组。您可以使用.position()，.widht()和.height()收集它们，也可以根据需要进行组合。

$(function() {
  function makeOffsetArray(tObj, offsetX, offsetY) {
    var p = tObj.position();
    p.right = p.left + tObj.width();
    p.bottom = p.top + tObj.height();
    return [
      p.left - offsetX,
      p.top - offsetY,
      p.right,
      p.bottom
    ];
  }
  var pArr = makeOffsetArray($("#draggable").parent(), $("#draggable").width(), $("#draggable").height());
  console.log("Position Array:", pArr);
  $("#draggable").draggable({
    containment: pArr
  });
});

body {
  padding: 30px;
}

#outerDiv {
  width: 500px;
  height: 500px;
  border: solid 1px black;
}

#draggable {
  width: 50px;
  height: 50px;
  background: #f00;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="outerDiv">
  <div id="draggable">
  </div>
</div>

相交点似乎是可拖动的top，left，因此bottom和right不需要偏移。

参考

• https://api.jquery.com/position/
• https://api.jquery.com/width/
• https://api.jquery.com/height/
• https://api.jqueryui.com/draggable/#option-containment