title: jQuery droppable - receiving events during drag over (not just on initial drag over)
body: <p>I am using <a href="http://jqueryui.com/demos/droppable/" rel="noreferrer">jQuery droppable</a> (in conjunction with <a href="http://jqueryui.com/demos/draggable/" rel="noreferrer">jQuery draggable</a>) to allow the user to add rows to an HTML table by dragging items from a list and dropping them on the table.</p>
  
  <p>This works well, however at present the logic is that when the user drag-drops on a table row the new row gets added <em>below</em> the row they dropped on.</p>
  
  <p>It would be better if the new row's add position was based on whether the user dropped in the upper or lower half of an existing row.</p>
  
  <p>This is easy enough to calculate in the <code>drop</code> event, but I need to give UI feedback as the user drags (which I would do by means of two CSS classes <code>droppable-above</code> and <code>droppable-below</code> for example).</p>
  
  <p>This doesn't seem to be possible, as the <code>over</code> event only fires once; when the user initially drags over the droppable element.</p>
  
  <p>Is it possible to get the <code>over</code> event to fire for every mouse move while the user is over a droppable element?</p>
  
  <p>If so, then I'd be able to do this:</p>
  
  <pre><code>$("tr.droppable").droppable({
      over: function(event, ui) {
          if (/* mouse is in top half of row */) {
              $(this).addClass("droppable-above").removeClass("droppable-below");
          }
          else {
              $(this).removeClass("droppable-above").addClass("droppable-below");
          }
      },
  
      out: function(event, ui) {
          $(this).removeClass("droppable-above").removeClass("droppable-below");
      },
  
      drop: function(event, ui) {
          $(this).removeClass("droppable-above").removeClass("droppable-below");
          if (/* mouse is in top half of row */) {
              // Add new row above the dropped row
          }
          else {
              // Add new row below the dropped row
          }
      }
  });
  </code></pre>
  
  <p>The CSS styles would be something like...</p>
  
  <pre><code>droppable-above { border-top: solid 3px Blue; }
  droppable-below { border-bottom: solid 3px Blue; }
  </code></pre>