包含到父级的JQuery Draggable和额外的一个
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了包含到父级的JQuery Draggable和额外的一个相关的知识，希望对你有一定的参考价值。
可拖动的文档显示，我们可以使用父容器来限制元素可以拖动到的位置。看来可拖动元素被约束到另一个元素。
是否可以将父级扩展“一点”？ （我将更详细地解释）。
当我们限制为父对象时，可拖动元素必须保留在内部：
我希望它能够执行以上操作，或者至少根据下一个屏幕快照与父母保持联系
我的努力（在上面的小提琴中）很差，因为它仅显示了如何使用可拖动。
$( "#draggable" ).draggable(containment:"parent");
答案
我假设您的问题更像是我如何如上所示约束可拖动对象。答案是使用替代元素或按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>以上是关于包含到父级的JQuery Draggable和额外的一个的主要内容，如果未能解决你的问题，请参考以下文章