title: How do I highlight a droppable area on hover using jquery ui draggable
body: <p>I actually have two questions, the on in the title being the main one.  I have multiple div elements on the page marked as droppable.  Inside these div elements I have spans that are marked as draggable.  I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.</p>
  
  <p>As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas.  When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items.  For reference, here is my javascript.</p>
  
  <pre><code>$('.drag_span').draggable({
      revert: true
  });
  $('.drop_div').droppable({
      drop: handle_drop_patient
  });
  
  function handle_drop_patient(event, ui) {
      $(this).append($(ui.draggable).clone());
      $(ui.draggable).remove();
  }
  </code></pre>