拖动到滚动 div 时，Scriptaculous Draggable/Droppable 脚本无法正常工作

Posted 2023-05-08

【中文标题】拖动到滚动 div 时，Scriptaculous Draggable/Droppable 脚本无法正常工作

【英文标题】：Scriptaculous Draggable/Droppable script not working properly when dragging into a scrolling div

【发布时间】：2011-01-28 15:30:35

【问题描述】：

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

#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 是否滚动？

【参考方案1】：

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

希望对你有帮助