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 的填充，因此您可以使用 space 删除项目而不将鼠标悬停在现有项目上。当一列为空时，您仍然会有一个“空格”来放置一个项目。

要解决滚动备份问题，请尝试以下操作：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 ，您可以将项目拖动到空列而不向上滚动。

带溢出的jQuery UI可排序div：auto

1 个答案: