如何停止使用不同父級的可放置事件傳播？

開始當元素具有不同父元素時，貪婪不會運行，並且此元素被疊加。就像這樣：如何停止使用不同父級的可放置事件傳播？

<div id="one"> 
    <div class="icone draggable"></div> 
    <div id="background" class="droppable"> 
    <div id="grey" class="droppable"></div> 
    <div id="red" class="droppable"></div> 
    </div> 
</div> 
<div id="two"> 
    <div id="yellow" class="droppable"></div> 
</div>

如果我放棄.icone從#red到#yellow（#yellow是#background），我有兩個事件（下降事件）這樣的：

start 
drop in background (<= Bad event) 
drop in yellow

但如果我放棄從#yellow噸.icone Ø#red，它的工作原理我只有一個事件：

start 
drop in red

#yellow沒有停止事件傳播，#red有正確的反應。

如果我拖.icone在#yellow，我有三個事件，而不是一個（在我的一部開拓創新的代碼，我可以設置.icone位置，當我將它拖到）：

start 
drop in background (<= Bad event) 
drop in yellow (<= Bad event) 
drag in yellow

請參閱my example code，如何停止事件傳播至＃黃色？

#red和#yellow可以疊加像這樣second example code。

我嘗試了不同的解決方案，在stackoverflow上使用over/out事件禁用其他droppable事件。但是，如果我使用這種解決方案，我不能剔除.icone至＃黃色。

謝謝。

（見這裏的解決方案：http://jsbin.com/mubenaze/21/edit）

來源

2014-02-21 Hors Sujet

所以，如果我拖動從黃一藍背景的綠色方塊，它不應該接受它？ – nowhere

它應該接受它，但如果我將綠色方塊從'red'放到'yellow'，我必須只有一個事件（watch console.log）。 –

所以額外的「背景下降」不應該發生 – nowhere

我猜你不得不像#yellow例外單獨工作。這是一個可能的解決方案，但它可能需要一些CSS修復（因爲殘疾人droppables得到不透明：0.35; 但我想不出任何固定除了在需要時禁用背景更好

$("#yellow").on("dropout", function(event, ui) { 
$("#background").droppable('option', 'disabled', false); 
}); 

$("#yellow").on("dropover", function(event, ui) { 
$("#background").droppable('option', 'disabled', true); 
});

這些需要爲每個不在背景內的div添加選項。

重新編輯：添加此下探後重新啓用#background：

$("#yellow").on("drop", function(event, ui) { 
$("#background").droppable('option', 'disabled', false); 
});

http://jsbin.com/mubenaze/18/

來源

2014-02-26 12:01:05 nowhere

我想保持這樣的HTML代碼，我不能更改HTML代碼。 –

哦，所以它不是無法訪問html文件的問題。你看不到我所看到的一切。 – nowhere

我不談論HTML代碼，但HTML結構（我的原始代碼更復雜，這個例子）。 –

如何停止使用不同父級的可放置事件傳播？

回答

相關問題