JqueryUI Draggable Containment：如何排除区域或元素

Question

想象一下，我有一个包含在父（ourHouse）中的可拖动元素（myLittleBrother）。

可拖动元素可以在兄弟元素（myRoom）的空间中随处可见。

如何组织jqueryUI以排除主要收容区域内的区域？

HTML

<div id="ourHouse"  >
    <div id="myLittleBrother"></div>
    <div  id="myRoom" ></div>
</div>

JS

$("#myLittleBrother").draggable({ 
        containment: "parent" BUT NOT myRoom...
});

Answer 1

我知道要实现这一目标的最简单方法是使用现有的插件。 JQuery UI Draggable Collision似乎运作良好。您将需要使用preventCollision选项，请记住，您需要让兄弟姐妹不要重新开始研磨。

如果您对使用插件不感兴趣，可以使用jQuery droppable小部件并收听over事件，然后为包含选项设置一个特殊值，以防止在碰撞不是＆ ＃39;允许。但这将涉及围绕dom操作的一些重要逻辑。

Answer 2

我最后的可行解决方法（在我的特殊情况下）是为拖动功能提供重定向，用于任何拖动的元素......

drag: function() {
  if (inside the element){
    Place outside via saved CSS properties;
  }
}

因此可拖动元素将进入该区域，但无法保存以保留在那里，因为保存的值将始终来自隐藏区域之外。对于那些想要阻止实际输入和/或不关心保存的数据属性而是关注屏幕外观的人来说，这是显而易见的。

但是..我也不会费心去找出拖动元素的来源，所以它会以一种非常奇怪的方式重新定位并移动到一个随机的地方....不漂亮。所以我不会接受我自己的答案，而是将其作为黑客攻击的起点。

Answer 3

为了回应@jwags的贡献，解决方案非常简单。显然在某个时间点jquery重命名为“draggable”为“ui-draggable”，错误很简单，就是找不到这个选择器。 因此，搜索+替换数据（“可拖动”）到数据（“ui-draggable”）可以解决源代码中的这个问题。