限制 jQuery 可拖动项与兄弟元素重叠/碰撞答案

【问题标题】：Restrict jQuery draggable items from overlapping/colliding with sibling elements限制 jQuery 可拖动项与兄弟元素重叠/碰撞
【发布时间】：2012-07-12 05:22:31
【问题描述】：

我需要使用 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>

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-draggable containment

【解决方案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"
});

【讨论】：

+1 巧妙地使用droppable的over事件触发mouseup。
您知道您的新解决方案是否与 JQuery 1.10 兼容？我遇到了错误。
这个 jsfiddle 不再工作了。答案应更新版本等详细信息
@Kukeltje JSFiddle 删除了我为示例上传的第三方文件。看起来你不能再上传第三方文件了，所以我把它们嵌入到了 JavaScript 部分。这是新示例：jsfiddle.net/q3x8w03y/1 我会用版本更新答案。
新解决方案不适用于 jQuery UI 1.10 及更高版本

【解决方案2】：

这让我费了不少心思。基本上我在要避免的元素上创建了一个droppable，然后在拖动结束时设置一个布尔值。然后，我在未记录的还原函数覆盖中使用它来取消删除。仅当#dragMe 完全超过#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/

【讨论】：