0

我正在使用 Scriptaculous Draggable /Droppable 脚本，并且在拖动到滚动 div 时遇到问题。我有以下布局（基于这个问题）：

#grid-container   { left:33px; position:relative; width:300px; }
#grid   { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul   { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li   { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }

.image-row   { margin-left: 10px; }
.grid-image   { height:50px; margin-left:-20px;  }

这是html：

<div id="grid-container">
  <div id="grid"> 
    <div id="row1" class="image-row"> 
      <ul> 
        <li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
        <li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
        <li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
        <li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
      </ul>
    </div>
    <div id="row2" class="image-row"> 
      <ul> 
        <li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
        <li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
      </ul>
    </div>
  </div>
</div>

我有另一个带有可拖动项目的 div，而所有 img 元素都是可放置的。这在大多数情况下效果很好，但是当网格的图像太多并且必须滚动时，我遇到了问题。我仍然可以拖放到该 div 中的大多数项目中，但是当我向下滚动然后尝试拖动到列表底部的一个项目上时，它会落在我滚动 div 之前位于底部的行上。

即使我在创建 Draggable 项目时设置了滚动属性，它也会滚动网格 div，但不会使用正确的 Droppable 项目。

有什么方法可以让 Draggable 项目拖放到正确的 Droppable 元素上，而不管包含的 div 是否滚动？

4

1 回答 1

1

昨天我在遇到同样的问题时发现了这个拖放问题。基本上解决方案是添加 Position.includeScrollOffsets = true; 到你的代码。

希望能帮助到你

于 2011-01-26T03:23:20.837 回答