限制jQuery可拖动项从重叠/与兄弟元素冲突

前端之家收集整理的这篇文章主要介绍了限制jQuery可拖动项从重叠/与兄弟元素冲突前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要使用jQuery UI来限制可拖动对象的容纳区域,并附加一些限制.我需要防止可拖动元素与同一容器中的其他元素重叠.我需要允许在“moveInHere”区域移动,但不允许“butNereHere”区域移动.可能吗?
<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"
});

解决方

以下应该工作.它有一个小故障,但是.一旦divs碰撞,你必须“重新格式化”你拖动的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"
});​

猜你在找的jQuery相关文章