jQueryUI droppable, stop propagation to overlapped sibling

Question

As you can see here: http://jsfiddle.net/rA4CB/6/

When I make the drop in the overlapped area it is received in both droppables, greedy doesn't work when the items are siblings. Is there any way to block the reception on droppables lower in the zIndex?

BTW, mouseOver won't fire for the droppable element as the mouse is actually over the draggable element.

relevant JS:

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        tolerance:'pointer',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
    $( "#droppable2" ).droppable({
        tolerance:'pointer',
        greedy:true,
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

Answer 1

Okay, so I spend an hour trying to figure it out, then as soon as I ask I then find my answer

http://jsfiddle.net/rA4CB/7/

Modified the JS to the following:

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        tolerance:'pointer',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
    $( "#droppable2" ).droppable({
        tolerance:'pointer',
        greedy:true,
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        },
        over: function(event, ui){
            $( "#droppable" ).droppable( "disable" )
        },
        out: function(event, ui){
            $( "#droppable" ).droppable( "enable" )
        }
    });
});

Answer 2

$( "#droppable" ).droppable({
    greedy: true,
    drop: function( event, ui ) {
       if(ui.helper.is(".dropped")) {
           return false;
       }
       ui.helper.addClass(".dropped");
    }
});

Just set a css class on ui.helper of draggable. If the draggable has been accepted once, it will be refused by all other droppables (Could be done with the droppable "accept" parameter,too , like accept : ":not(.dropped)" and the class added to ui.draggable).