假设我有一个 ID 为 #draggable
的可拖动元素。我还有一个 div,其中包含一个带有 id #list
的可放置 div 列表。但是容器 div 的高度有限,所以一次只能显示 3 个可放置的 div(A、B 和 C)。该容器 div 设置为 overflow:scroll
。
当我将 #draggable
元素拖到它上面时,我如何设法让容器 div 滚动?因为现在我无法将元素放在被溢出隐藏的最后一个可放置元素上(D、E、F、G)。
<span id="draggable">draggable</span>
<hr>
<div style="height:200px;overflow:scroll">
<ul id="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
此外,如果您将元素放在 overflow:scroll
div 下,它实际上会放在隐藏的可放置 div 上!
如何处理这些问题?
最佳答案
最简单的解决方案是将 #draggable
div 移动到 div
中,并附加 overflow:scroll
,如下所示:
<div style="height:200px;overflow:scroll">
<span id="draggable">draggable</span>
<hr/>
<ul id="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
查看更新的 fiddle :https://jsfiddle.net/matikucharski/v80kppez/2/
关于javascript - 如何滚动溢出:scroll div while dragging object?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35180319/