一个可放置区域位于另一个区域中答案

【问题标题】：One droppable area inside another一个可放置区域位于另一个区域中
【发布时间】：2014-07-29 20:47:27
【问题描述】：

我有两个可放置区域，其中一个在另一个内部。我希望能够仅针对内部区域捕获丢弃事件并防止传播，因此外部根本不会得到它。有可能吗？

<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
    $('#draggable').draggable();
    $('#droppable1').droppable({
        drop: function() {
            console.log('droppable 1')
        }
    });
    $('#droppable2').droppable({
        drop: function() {
            console.log('droppable 2')
        }
    });
});
</SCRIPT>
<style>
#droppable1 {
    border: 1px solid black;
    position: absolute;
    height: 200px;
    top: 0px;
    width: 500px;
    background: blue;
}
#droppable2 {
    border: 1px solid black;
    position: absolute;
    height: 100px;
    top: 50px;
    width: 400px;
    left: 50px;
    z-index: 100;
    background: red;
}
#draggable {
    border: 1px solid black;
    position: absolute;
    height: 50px;
    top: 300px;
    width: 100px;
    left: 300px;
    z-index: 200;
}
</style>
</HEAD>
<BODY>
<div id="droppable1">Droppable 1</div>

<div id="droppable2">Droppable 2</div>

<div id="draggable">Draggable</div>
</BODY>
</HTML>

这里是 jsFiddle example。

尝试将“Draggable”框拖到“Droppable 2”区域。有了这个实现，“Droppable 1”区域将首先获得 Drop 事件，之后它只会进入“Droppable 2”。我想要的只是“Droppable 2”获得事件。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我不知道为什么事件会按此顺序触发，但如果有帮助，这里有一个解决方法。只需在触发事件之前设置一个超时时间，您就可以检查事件冒泡是否完成：

http://jsfiddle.net/BS3g9/3/

$(document).ready(function () {
    $('#draggable').draggable();
    $('#droppable1').droppable({
        drop: function() {
            brain.registerDrop(function() {
               console.log("DROPPED 1!");
            });
        }
    });
    $('#droppable2').droppable({
        drop: function() {
            brain.registerDrop(function() {
               console.log("DROPPED 2!");
            });
        }
    });
});

var brain = {
    state : {
        dropAction : function() {},
        dropTimer : null
    },
    registerDrop  : function(cb) {
        brain.state.dropAction = cb;
        if (brain.state.dropTimer) {
            clearTimeout(brain.state.dropTimer);
        }
        brain.state.dropTimer = setTimeout(function() {
            brain.state.dropAction();
        }, 10);
    }
}

【讨论】：

你也可以用更小的超时时间逃脱 - ~2ms
乔纳森，不确定我是否理解您的建议...您能与我分享代码吗？您发送的链接没有任何变化
有趣...会考虑的。我个人不喜欢基于 setTimeout 的解决方案，但在这种情况下它可能会起作用......无论如何，谢谢你的回答！
嗨乔纳森，我能够打破你的例子......如果我在 droppable1 之前注册 droppable2，这个区域将永远不会得到事件。查看更新的小提琴：jsfiddle.net/pshenichnov/BS3g9/4
这是有道理的。我的修复是假设第二层位于调用堆栈的底部，因此在运行回调之前等待事件冒泡。更改注册事件的顺序从根本上改变了调用堆栈。这意味着只运行第一个事件并阻止任何后续事件运行