将项目从一个 div 拖动到另一个，垂直滚动

Question

在启用垂直滚动的情况下尝试将项目从一个可排序 div 拖到另一个可排序时出现问题。

问题：有两个单独的列 div，我们如何从一列拖动到另一列，同时允许在列上垂直滚动（不是水平滚动），相互独立?

有效的示例如下（bootstrap 启用实现列）：

<div class="demo row" style="overflow:auto">
    <ul id="left-col" class="col-xs-6">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>

    <ul id="right-col" class="col-xs-6">
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

和 JS:

$("#left-col").sortable({
    cursor: 'move',
    connectWith: '#right-col',
    containment: '.demo'
});

$("#right-col").sortable({
    cursor: 'move',
    connectWith: '#left-col',
    containment: '.demo'
});

此示例的问题在于滚动是在包含两列的容器上进行的。如果我们改为将 overflow-y:auto 选项添加到 dividual 列中的两个，那么我们将在 x 方向上无限滚动，如 this fiddle[=16= 中所示]

Answer 1

原来一个干净的解决方案是将每一列包装在自己的 div 中，如下所示：

<div style="overflow:hidden;position:relative">

并将列的位置设置为static。然后它就像一个魅力。

将项目从一个 div 拖动到另一个，垂直滚动

Drag items from one div to other, with vertical scrolling

jquery

jquery-ui

jquery-ui-sortable