JQuery trascinabile: scroll non funziona quando helper: clone viene utilizzato

Question

Ho un tipo di elenco di cartelle di situazione in cui è possibile trascinare elementi da una cartella a un'altra utilizzando jquery trascinabile/trascinabile. Gli elementi delle cartelle sono trascinabili e le cartelle sono trascinabili. Questi sono in un div che è abbastanza piccolo da mostrare una barra di scorrimento verticale.

Ho "scroll: true" impostato sugli elementi trascinabili in modo che possano far scorrere il div. Quando uso anche "helper:" clone "" sugli oggetti trascinabili, lo scorrimento non funziona più.

Cosa sto sbagliando?

Ecco alcuni codice molto semplificato:

<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

Prova avvolgendo il div troppo pieno con un div con position: relative; e aggiungendo la posizione: relativa; al tuo div overflow

<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>