Question

我为网站编写了一个用户脚本，该脚本包含一个jQuery UI draggable。非常简化，该网站有两行，每行有两个水平放置的div。

网站布局以前使用了两个带有内部div而不是行的列。拖拽者被限制在右栏的父母身上，这正是我们想要的。然而，现在，没有办法限制到正确的＃34;列＆＃34;因为DOM中不再存在该列。

有没有办法将没有旧父元素的可拖动div包含到div的右列？如果需要，我可以向DOM添加元素（或做任何事情），我们可以使用jQuery和jQuery UI的全部功能。我知道可以在右上方的div上使用droppable，但据我所知，这将导致拖动器在两者之间捕捉。如果这是唯一的选择，那么我会这样做，但如果有另一种方法，我很乐意看到它。

FIDDLE

<div id="outercontainer">
  <div id="toprow">
    <div id="topleft"></div>
    <div id="topright"></div>
  </div>
  <div id="bottomrow">
    <div id="bottomleft"></div>
    <div id="bottomright"></div>
  </div>
</div>

<div id="dragme"></div>

Answer 1

约束位置使用的实际包含值是一个坐标数组，它是根据您在选项本身中设置的对象计算的。但是您可以在可拖动的实例上访问此包含属性并根据需要进行修改。唯一的限制是它需要是一个矩形，你不能混合形状。

在您的情况下，您可以简单地计算元素的坐标。

.navbar-toggle {
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  float: right;
  left: -300px;
}

https://jsfiddle.net/nxxbh8eL/

包含可拖动到多个元素

FIDDLE

1 个答案: