jquery - 限制 jQuery 可拖动项与同级元素重叠/碰撞

Question

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

<div id="moveInHere">

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

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

</div>


<script type="text/javascript">

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

</script>

Answer 1

编辑:新解决方案

我找到了一个名为 JQuery UI Draggable Collision 的插件.使用它，实现您想要的功能变得微不足道。请参阅以下 jsFiddle 示例:http://jsfiddle.net/q3x8w03y/1/ (这使用 1.0.2 版的 JQuery UI Draggable Collision，以及 JQuery 1.7.2 和 JQueryUI 1.1.18。)

代码如下:

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

旧解决方案

以下应该有效。不过，它有一个小故障。一旦 div 发生碰撞，您必须“重新抓取”正在拖动的 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"
});​