如何滚动溢出：拖动对象时滚动 div？

Question

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

当我将 #draggable 元素拖到容器 div 上时，如何才能让容器 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>

查看更新的小提琴：https://jsfiddle.net/matikucharski/v80kppez/2/