JQuery que se puede arrastrar: scroll no funciona cuando helper: se usa clon

Question

Tengo una lista de carpetas tipo de situación en la que puedo arrastrar elementos de una carpeta a otra mediante jquery que se puede arrastrar/soltar. Los elementos de la carpeta son arrastrables y las carpetas son droppable. Estos están en un div que es lo suficientemente pequeño como para mostrar una barra de desplazamiento vertical.

Tengo "scroll: true" establecido en los elementos que se pueden arrastrar para que puedan hacer que el div se desplace. Cuando también uso 'helper:' clonar '' en los elementos que se pueden arrastrar, el desplazamiento ya no funciona.

¿Qué estoy haciendo mal?

Aquí hay un código muy simplificado:

<div style="background-color: red; width: 500px; height: 100px; overflow: auto;"> 

    <table id="nfTable" class="treeTable"> 
     <tr><td><span class="parent initialized expanded">drop here</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="droppable">drop here</span></td></tr> 
     <tr><td><span class="droppable">drop here</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="draggable">drag me</span></td></tr> 
     <tr><td><span class="droppable">drop here</span></td></tr> 
     <tr><td><span class="droppable">drop here</span></td></tr> 
     <tr><td><span class="droppable">drop here</span></td></tr> 
     <tr><td><span class="droppable">drop here</span></td></tr> 
    </table> 

</div> 
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> 
// draggable and droppable in here: 
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $(".draggable").draggable({ 
     // commenting the line below will make scrolling while dragging work 
     helper: "clone", 
     scroll: true, 
     revert: "invalid" 
    }); 

    $(".droppable").droppable({ 
     accept: ".draggable", 
     drop: function(e, ui) { 
      // todo 
     } 
    }); 
}); 
</script> 

Answer 1

Trate de envolver su desbordamiento div con un div con position: relative; y agregando posición: relativa; a su desbordamiento div.

<div style="position: relative;"> 
    <div style="position:relative; background-color: red; width: 500px; height: 100px; overflow: auto;"> 
     <table id="nfTable" class="treeTable"> 
      <tr><td><span class="parent initialized expanded">drop here</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="droppable">drop here</span></td></tr> 
      <tr><td><span class="droppable">drop here</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="draggable">drag me</span></td></tr> 
      <tr><td><span class="droppable">drop here</span></td></tr> 
      <tr><td><span class="droppable">drop here</span></td></tr> 
      <tr><td><span class="droppable">drop here</span></td></tr> 
      <tr><td><span class="droppable">drop here</span></td></tr> 
     </table> 
    </div> 
</div>