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

我需要使用jQuery UI来限制可拖动对象的容纳区域,并附加一些限制.我需要防止可拖动元素与同一容器中的其他元素重叠.我需要允许在“moveInHere”区域移动,但不允许“butNereHere”区域移动.可能吗？

<div id="moveInHere">

    <div id="dragMe"> </div>

    <div id="butNotHere"> </div>

</div>


<script type="text/javascript">

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

</script>

解决方法

编辑：新解决方案

我发现这个插件叫做JQuery UI Draggable Collision.使用这个,实现你想要的功能变得微不足道.请参阅以下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"
});

旧解决方案

以下应该工作.它有一个小故障,但是.一旦divs碰撞,你必须“重新格式化”你拖动的div,这可能有点恼人.也许别人会知道如何解决这个问题.你可以看到我的jsfiddle示例here：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"
});​

原文地址：https://www.jb51.cc/jquery/176661.html