要素の親が異なる場合、貪欲を開始することは実行されず、この要素が重ね合わされます。このような ：
<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にあります）、次のような2つのイベント（ドロップイベント）があります。
start
drop in background (<= Bad event)
drop in yellow
しかし、.iconeを#yellowから#redにドロップすると、機能します。イベントは1つだけです。
start
drop in red
#yellowはイベントの伝播を停止しませんでした、＃redは正しい反応を示します。
そして、.iconeを#yellowにドラッグすると、1つではなく3つのイベントが発生します（元のコードでは、ドラッグしたときに.iconeの位置を設定できます）：
start
drop in background (<= Bad event)
drop in yellow (<= Bad event)
drag in yellow
サンプルコード「#yellowへのイベントの伝播を停止するにはどうすればよいですか？」を参照してください。
#redそして#yellow、このように重ね合わせることができる第二のサンプルコード。
他のドロップ可能なイベントを無効にするover / outイベントを伴うstackoverflowで提案されたさまざまなソリューションを試しました。しかし、このソリューションを使用すると、.iconeを#yellowにドロップアウトできません。
感謝。
（ここで解決策を参照してください： http ：//jsbin.com/mubenaze/21/edit）
#yellowのような例外については、単独で作業する必要があると思います。これは可能な解決策ですが、いくつかのcss修正が必要になる場合があります（無効にされたドロップ可能オブジェクトは不透明度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);
} );
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加