How do I stop droppable event propagation with different parent?

Question

To begin greedy doesn't run when elements have different parents, and this element is superposed. Like this :

<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>

If I drop .icone from #red to #yellow (#yellow is on #background), I have two events (drop event) like this :

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

But if I drop .icone from #yellow to #red, it works I have only one event :

start
drop in red

#yellow didn't stop event propagation, #red has a correct reaction.

And if I drag .icone in #yellow, I have three event instead one (in my orignal code I can set position of .icone when I drag it) :

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

See my example code, How do I stop event propagation to #yellow ?

#red and #yellow can be superposed like this second example code.

I tried different solutions proposed on stackoverflow with over/out event who disable other droppable events. But if I use this solutions, I can't drop out .icone to #yellow.

Thank.

(See solution here : http://jsbin.com/mubenaze/21/edit)

Answer 1

I guess you are forced to work singularly on the exceptions like #yellow. This is a possible solution but it might take some css fixes (since the disabled droppables get a opacity: 0.35; But i can't think of any fix better than disabling the background when needed.

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

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

These options need to be added for each div which isn't inside the background.

REEDIT: add this to reenable the #background after dropping:

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

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