JQuery draggable: सहायक होने पर काम नहीं कर रहा है: क्लोन का उपयोग किया जाता है

Question

मेरे पास फ़ोल्डर सूची प्रकार की स्थिति है जहां मैं jquery draggable/droppable का उपयोग करके एक फ़ोल्डर से दूसरे फ़ोल्डर में आइटम खींच सकता हूं। फ़ोल्डर आइटम खींचने योग्य हैं और फ़ोल्डर ड्रॉप करने योग्य हैं। ये एक div में हैं जो एक लंबवत स्क्रॉल बार दिखाने के लिए काफी छोटा है।

मेरे पास ड्रैग करने योग्य वस्तुओं पर "स्क्रॉल: सत्य" सेट है ताकि वे div को स्क्रॉल कर सकें। जब मैं ड्रैग करने योग्य वस्तुओं पर 'सहायक: "क्लोन" का भी उपयोग करता हूं, तो स्क्रॉलिंग अब काम नहीं करती है।

मैं क्या गलत कर रहा हूं?

यहाँ कुछ बहुत सरलीकृत कोड है:

<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

स्थिति के साथ एक div के साथ अपने अतिप्रवाह div लपेटकर का प्रयास करें: रिश्तेदार; और स्थिति जोड़ना: रिश्तेदार; अपने अतिप्रवाह 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>