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例子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"
});​

关于jquery - 限制 jQuery 可拖动项目与同级元素重叠/碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11452185/

相关文章:

javascript - 多个数组元素的总和

jQuery UI 选项卡 - 自动高度

javascript - 如何从Json中删除特殊字符而不解析

php - 嵌套的可排序 JQuery 列表在 IE 中不起作用,而在 FF 中起作用

javascript - 使用 jQuery 拖动面板以显示 div。这太痛苦了

jquery - 如何使用 $ 以及 jQuery

javascript - map 中的可拖动标记

javascript - 根据 ul 长度启用/禁用 droppable

javascript - HTML/jQuery 保存订单

java - VBox拖动闪烁