javascript - 如何滚动溢出:scroll div while dragging object?

Question

假设我有一个 ID 为 #draggable 的可拖动元素。我还有一个 div，其中包含一个带有 id #list 的可放置 div 列表。但是容器 div 的高度有限，所以一次只能显示 3 个可放置的 div(A、B 和 C)。该容器 div 设置为 overflow:scroll。

当我将 #draggable 元素拖到它上面时，我如何设法让容器 div 滚动？因为现在我无法将元素放在被溢出隐藏的最后一个可放置元素上(D、E、F、G)。

See this fiddle for demo

<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 上!

如何处理这些问题？

Answer 1

最简单的解决方案是将 #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/