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

原文 标签 jquery jquery-ui draggable jquery-ui-draggable containment

我需要使用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 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示例herehttp://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"
});​

相关文章:

javascript - jQuery Superbox库不起作用

javascript - jQuery UISlider加载时显示默认值

javascript - 将ID放入<select>内的<span>中

jquery - 使用容器时,带有margin-left的jQuery可拖动元素不会向左移动

javascript - 当光标离开div区域时元素停止拖动

javascript - 使用JavaScript从URL获取JSON对象

javascript - 动态创建元素时,所选插件不起作用

jquery - jQuery触发onclick(如果选中了单选按钮)

jquery-ui - 在加载数据时在jquery数据表中显示自定义消息?

javascript - 拖动标记Google Maps API时不会触发鼠标悬停