JQuery Draggable包含到父级，还有一点额外的功能

draggable的文档显示，我们可以使用包容父对象来约束元素可以拖动到的位置。这表明可拖动图元被约束到另一个图元

是否可以“稍微”扩展父级？（我会详细解释）

当我们局限于父元素时，可拖动元素必须保持在：

我希望它要么做上述事情，要么至少按照下一个屏幕截图与家长保持联系

我的努力（在上面的小提琴）是穷人，因为它只显示了如何使用拖拉

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

---

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

包含类型：

选择器

或

元素

或

字符串

或

数组

约束拖动到指定元素或区域的边界内。 支持多种类型：

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

  “父项”

  ，

  “文档”

  ，

  “窗口”

• 数组：以

  [x1，y1，x2，y2]

  的形式定义边界框的数组

因此，在初始化可拖动项之前，我们可以构建相对于目标对象和被拖动项的点数组。您可以使用

.position（）

、

.width（）

和

.height（）

收集这些数据，或者根据需要进行组合

$（函数（）{
函数makeOffsetArray（tObj、offsetX、offsetY）{
var p=tObj.位置（）；
p、 右=p.left+tObj.width（）；
p、 底部=顶部+总高度（）；
返回[
p、 左偏，
p、 自上而下，
p、 对，
p、 底部
];
}
var pArr=makeOffsetArray（$（“#可拖动”）.parent（），$（“#可拖动”）.width（），$（“#可拖动”）.height（）；
log（“位置数组：”，pArr）；
$（“#可拖动”）。可拖动({
遏制：帕尔
});
});
正文{
填充：30px；
}
#外层{
宽度：500px；
高度：500px；
边框：实心1px黑色；
}
#拖拉的{
宽度：50px；
高度：50px；
背景：#f00；
}

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