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>