Javascript 将jQuery UI可拖动的移动限制为任意；附件「；

我有一个jQueryUI可拖动，我想限制它的移动。如果该移动被约束到父容器，则支持原样。但我需要的是将运动限制在一个“封闭”的框中。为了让它更清晰，我们可以做一个类比：想象你把一个戒指扔到一根杆子上。显然，吊环的运动受到它被抛过的杆子的限制

到目前为止，我拥有的是一个定制的

拖动

处理函数，它可以完成这项工作，但有一个恼人的副作用。当我检测到碰撞时，我必须

从它返回false

，虽然这会限制移动，但它也会停止拖动。如果我不返回false，我所做的位置的覆盖就没有效果

我做了一个JSFiddle：

在那把小提琴中，由于某种原因，我甚至不能再次拖动它（它在我的实际页面上工作），但代码显示了这个想法

jQueryUI有什么方法吗？或者我最好只使用自己的拖动功能？我只是不喜欢重新发明轮子

[编辑]

下面是一个屏幕截图，以进一步说明我的目标：

---

这个想法是，白盒子只能以这样一种方式拖动，即红盒子总是在白盒子里面。红色的盒子本身是静态的。

请试试这个丹尼斯，或者解释一下为什么这个想法不正确

更新

根据您的澄清，以下是解决方案。很容易通过推特变得完美，但这正是你想要的

let pole=$（“#pole”）；
let ring=$（“#ring”）；
let ringlt=极点位置（）；
设polelt=极点位置（）；
让安全壳=[ringlt.left-pole.outerWidth（）/2，ringlt.top-pole.outerHeight（）/2，ring.outerWidth（）+pole.innerWidth（）/2，ring.innerHeight（）+pole.outerHeight（）]；
$（“#杆”）。可拖动({
遏制：遏制
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#杆子{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
宽度：200px；
光标：移动；
}
#戒指{
位置：绝对位置；
顶部：65px；
左：130像素；
宽度：400px；
边框：1px纯红；
高度：100px；
}

拖动我

有什么原因不能按设计使用jQuery UI吗？我添加了一个屏幕截图来澄清差异。我基本上是在尝试与jQueryUI的默认约束动作“相反”，我添加了一条带有屏幕截图的评论，以进一步阐明我的目标。我希望运动受到“内部盒子”的约束，而不是外部盒子。我想我可以动态地创建一个不可见的外部盒子，它的尺寸看起来像是约束在内部盒子上。但在这一点上，我也可以实现自己的draggable，或者使用坐标数组。如果有机会，让我改变一下我的例子。他们的文档只提到DOM元素（或轴）作为

包含的可能值。如果它还需要简单的坐标，这至少会使“伪”方法更可行。更新，请检查。哈，是的，这正是我想要的！太好了，谢谢！