JQuery draggable：使用克隆時滾動不工作

Question

我有一個文件夾列表類型的情況，我可以從一個文件夾拖動項目到另一個使用jQuery的可拖/放。文件夾項目可拖動，文件夾可放置。這些是在一個足夠小，以顯示垂直滾動條的div。

我對可拖動項目設置了「scroll：true」，以便它們可以使div滾動。當我在可拖動項目上也使用'helper：'clone''時，滾動不再起作用。

我在做什麼錯？

這裏有一些非常簡單的代碼：

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