限制jQuery可拖动项与重叠/与兄弟元素冲突

我需要使用jQuery UI限制可拖动对象的包含区域，但有一些额外的限制。 我需要防止draggable元素与同一容器中的其他元素重叠。 我需要允许在“moveInHere”区域移动而不是“butNotHere”区域。 可能吗？ 

 
 
 
 
 
  $("#dragMe").draggable({ containment: "#moveInHere" });

编辑：新解决方案

我找到了一个名为JQuery UI Draggable Collision的插件。 使用它，实现所需的function变得微不足道。 请参阅以下jsFiddle示例： http ： //jsfiddle.net/q3x8w03y/1/ （这使用JQuery UI Draggable Collision的1.0.2版本，以及JQuery 1.7.2和JQueryUI 1.1.18。）

这是代码： 

 $("#dragMe").draggable({ obstacle: "#butNotHere", preventCollision: true, containment: "#moveInHere" });

旧解决方案

以下应该有效。 但它有一个小故障。 一旦div碰撞，你必须“重新调整”你拖动的div，这可能有点烦人。 也许其他人会知道如何解决这个问题。 你可以在这里看到我的jsFiddle示例： http ： //jsfiddle.net/MrAdE/8/ 

 var prevOffset, curOffset; $("#dragMe").draggable({ drag: function(e,ui) { prevOffset= curOffset; curOffset= $.extend({},ui.offset); return true; } }); $("#butNotHere").droppable({ greedy: true, over: function(e,ui) { ui.helper.offset(curOffset= prevOffset).trigger("mouseup"); }, tolerance: "touch" });​

这让我有点蠢蠢欲动。 基本上我在你想要避免的元素上创建了一个droppable ，然后在拖动它时设置一个布尔值。 然后我在未记录的恢复函数覆盖中使用它来取消丢弃。 它只适用于#butNotHere完全结束#butNotHere ： 

 $(document).ready(function(){ var shouldCancel = false; $('#dragMe').draggable({ containment: '#moveInHere', revert: function(){ if (shouldCancel) { shouldCancel = false; return true; } else { return false; } } }); $('#butNotHere').droppable({ over: function(){ shouldCancel = true; }, out: function(){ shouldCancel = false; } }); });

查看工作演示并随意使用它： http ： //jsfiddle.net/H59Nb/31/

    Interesting Posts

    可拖动对象“粘合”到边框