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

Posted 2023-05-08

【中文标题】JQuery Draggable 包含到父级和一些额外的

【英文标题】：JQuery Draggable contained to parent and a bit extra

【发布时间】：2020-04-21 08:20:09

【问题描述】：

draggable 的文档显示我们可以使用包含父项来限制元素可以拖动到的位置。这似乎是可拖动元素被约束到另一个元素。

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

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

我希望它执行上述操作，或者至少按照下一个屏幕截图与家长保持联系

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

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

JSFIDDLE

【问题讨论】：

是否可以将父级扩展“一点”？是的，有可能。

【参考方案1】：

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

遏制类型：Selector或Element或String或Array

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

选择器： 可拖动元素将包含在选择器找到的第一个元素的边界框内。如果未找到任何元素，则不会设置任何包含。 元素：可拖动元素将包含在该元素的边界框内。 字符串： 可能的值："parent"、"document"、"window"。 数组：以[ x1, y1, x2, y2 ] 形式定义边界框的数组。

所以在初始化 Draggable 之前，我们可以构建相对于目标对象和被拖动项目的点数组。您可以使用.position()、.width() 和.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