title: jQueryUI droppable, stop propagation to overlapped sibling
body: <p>As you can see here: <a href="http://jsfiddle.net/rA4CB/6/">http://jsfiddle.net/rA4CB/6/</a></p>
  
  <p>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?</p>
  
  <p>BTW, mouseOver won't fire for the droppable element as the mouse is actually over the draggable element.</p>
  
  <p>relevant JS:</p>
  
  <pre><code>$(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!" );
          }
      });
  });
  </code></pre>