限制 jQuery UI 可拖动到任意 "enclosure"

Question

我有一个 jQuery UI 可拖动对象，我想限制它的移动。如果该移动受限于父容器，则按原样支持。但我需要的是将移动限制在 "enclosed" 框内。为了让它更清楚一个类比：想象你把一个环扔在一根杆子上。戒指的运动显然受到了它被扔过的杆子的限制。

到目前为止，我拥有的是一个自定义 drag 处理程序函数，它可以完成这项工作，但有一个烦人的副作用。当我检测到碰撞时，我必须 return false 从它开始，虽然这限制了运动，但它也停止了拖动。如果我不 return false，我正在做的位置的覆盖根本没有效果。

我做了一个 JSFiddle：https://jsfiddle.net/dmrschmidt/u8u4qpdo/11/

其中 fiddle 由于某种原因我什至无法再次重新拖动它（它在我的实际页面上有效）但代码显示了这个想法。

jQuery UI 有什么办法吗？还是我最好只滚动自己的拖动功能？我只是喜欢不重新发明轮子。

[编辑]

这是进一步说明我的目标的屏幕截图：https://s3.amazonaws.com/general-asset-catalogue/screenshot.png

想法是，白框只能以这种方式拖动，即红框始终在白框内。红框本身是静态的。

Answer 1

请试试这个 Dennis，或者解释为什么这不是正确的想法。

更新

根据您的说明，这是解决方案。轻松发布推文以获得完美，但这就是您所追求的。

let pole = $('#pole');
let ring = $('#ring');
let ringlt = pole.position();
let polelt = pole.position();
let containment = [ringlt.left - pole.outerWidth() / 2, ringlt.top - pole.outerHeight() / 2, ring.outerWidth() + pole.innerWidth() / 2, ring.innerHeight() + pole.outerHeight()];
$('#pole').draggable({
  containment: containment
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#pole {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  width: 200px;
  cursor: move;
}

#ring {
  position: absolute;
  top: 65px;
  left: 130px;
  width: 400px;
  border: 1px solid red;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="ring"></div>
<div id="pole">drag me</div>

限制 jQuery UI 可拖动到任意 "enclosure"

restrain jQuery UI draggable movement to arbitrary "enclosure"

javascript

jquery

jquery-ui

jquery-ui-draggable