javascript - jQuery UI 可排序 div 溢出 : auto

Question

我有两个可排序的列，放置在具有固定高度和 overflow: auto 的 div 上。

当我尝试将最后一个项目从左列移动到右列时，我需要一直向下滚动，拿起该项目并与他一起向上滚动。当我到达右列中的第一个项目时，我无法将我的项目放到那里，直到我将其悬停在左列项目上。

我感觉我拖动的某个项目的焦点正在消失，当我经过他原来的专栏时他又回来了。

有什么想法吗？

Here is JSFiddle with an example

当您将项目直接拖动到右列时，而不是当您将其拖动到左列时，会出现此问题。这是一个错误吗？

Answer 1

抱歉，我不完全确定问题出在哪里。您是否希望能够将左列的项目拖动到右列，而无需一直滚动到顶部？

如果是这种情况，请尝试以下操作:http://jsfiddle.net/aes85/1/

#wrapper{
    height: 300px;
    overflow: auto;
}

#List1, #List2
{
    width: 200px;
    float: left;
    border: solid 2px black;
    margin-bottom: 20px;
    padding-bottom: 50px; /* <--added this */
}

我刚刚向两列添加了 50px 的填充，以便您有空间可用于放置项目，而无需将鼠标悬停在现有项目上。当一列为空时，您仍然有一个“空间”来放置项目。

要解决滚动备份问题，请尝试以下操作:http://jsfiddle.net/aes85/2/ 。

#wrapper{
    height: 470px; /* <-- changed this to 470px */
    overflow: auto;
}

#List1, #List2
{
    width: 200px;
    float: left;
    border: solid 2px black;
    margin-bottom: 20px;
    height:100%; /* <-- added 100% height */
}

这里我只是将两列的高度设置为470px。它足够高，可以将所有项目容纳在一列中，而不会出现任何溢出问题。只需记住调整列的高度即可让一列容纳所有项目。此外，当一列为空时，该列的高度仍保持在 470px，您可以将项目拖动到空列中，而无需向上滚动。