title: jquery ui droppable's greedy setting is not working?
body: <p>By setting droppable widget's greedy to true, only the top-most element should respond to a drop event. There's really no complexity here but I just cannot get it to work. And this is all I have so not much to work on:</p>
  
  <p>CSS:</p>
  
  <pre><code>.page{
      position:    absolute;
      width:       150px; 
      height:      150px;
      left:        0px; 
      top:         0px;
      text-align:  center;
      background:  #F0FFFF;
      border:      1px solid #89B;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class = 'page' id = 'page1'&gt; page1 &lt;/div&gt;
  &lt;div class = 'page' id = 'page2'&gt; page2 &lt;/div&gt;
  &lt;div class = 'page' id = 'page3'&gt; page3 &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>document.ready = function(){
  
  
      $('.page').draggable()
  
  
      $('.page').droppable({
  
          greedy: true,
  
          drop: function( event, ui ){
  
              console.log( 'assert drop once')
          }
  
      })
  
  
  }
  </code></pre>
  
  <p>what's happening right now is that all the dropped on elements are responding to the drop event. Since there's so little code to hold on to, I have no idea how to diagnose this.</p>