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

Question

我有一个可拖动的 jQuery UI，我想限制它的移动。如果该移动仅限于父容器，则按原样支持。但我需要的是将运动限制在“封闭”的盒子内。为了让它更清楚，打个比方:想象一下你把一个环扔到一根杆子上。环的运动显然受到它被扔过的杆子的限制。

到目前为止，我拥有的是一个自定义的drag处理函数，它可以完成这项工作，但有一个恼人的副作用。当我检测到碰撞时，我必须从中返回 false，虽然这会限制移动，但也会停止拖动。如果我不返回 false，则覆盖我正在执行的位置根本不起作用。

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

在那个 fiddle 中，由于某种原因，我什至无法再次重新拖动它(它在我的实际页面上工作)，但代码显示了这个想法。

有什么方法可以使用 jQuery UI 或者我最好只滚动我自己的拖动功能？我只是喜欢不重新发明轮子。

[编辑]

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

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

Answer 1

请尝试这个丹尼斯，或解释为什么这不是正确的想法。

更新

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

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>