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

发布于 2024-08-25 16:19:06 字数 1935 浏览 7 评论 0原文

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

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

原文

I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on 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;  }

Here is the 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>

I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.

Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.

Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?

分享到QQ

分享到微博