使用垂直滚动

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选项添加到两个单独的列中，那么我们可以在x方向上进行无限滚动，如this fiddle

中所示

Answer 1

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

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

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