Question

我需要使用jQuery UI限制可拖动对象的包含区域，但有一些额外的限制。我需要防止draggable元素与同一容器中的其他元素重叠。我需要允许在“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/（这使用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示例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"
});

Answer 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/

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

2 个答案: