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

Posted 2023-05-08

【中文标题】限制 jQuery 可拖动项与兄弟元素重叠/碰撞

【英文标题】：Restrict jQuery draggable items from overlapping/colliding with sibling elements

【发布时间】：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>

【参考方案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/