10

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

2 回答 2

19

编辑：新解决方案

我为此找到了一个名为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"
});

​</p>

旧解决方案

以下应该工作。不过，它有一个小故障。一旦 div 发生碰撞，您必须“重新抓取”正在拖动的 div，这可能有点烦人。也许其他人会知道如何解决这个问题。你可以在这里看到我的 jsFiddle 示例：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"
});​
于 2012-07-12T14:01:49.837 回答
7

这让我费了不少心思。基本上我在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/

于 2012-07-12T13:48:44.210 回答