Question

我有一个jQuery UI draggable，我想限制它的运动。如果该移动被约束到父容器，则支持原样。但我需要的是将运动限制在“封闭”的盒子里。为了让它有希望更清楚一个类比：想象你在一根杆子上扔一枚戒指。然后，环的运动明显受到它被抛出的杆的限制。

到目前为止，我所拥有的是一个自定义drag处理程序函数，它可以完成这项任务，但是会产生恼人的副作用。当我发现碰撞时我必须return false，当它限制了移动时，它也会停止拖动。如果我没有返回false，那么我正在做的位置的覆盖就没有效果了。

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

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

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

[编辑]

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

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

Answer 1

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

<强>更新

根据您的澄清，这是解决方案。轻松推文以获得完美，但这就是您追求的目标。

＆＃13;

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
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

将jQuery UI可拖动运动限制为任意“圈地”

1 个答案: