jquery-ui - 滚动时jQuery可排序包含中断

Question

我正在开发一个使用可排序列表的小部件，但我遇到了容器滚动时出现的这个小问题。我不希望<li>超出<ul>，所以我containment: "parent"在将 sortable 应用于列表时进行了设置。

当容器不滚动时，容器工作得很好。但是当它这样做时，如果将一个项目拖到未显示的列表的任何一端，则包含将停止按预期工作并且该项目移动到外面。

我不确定我是否遗漏了一些可排序的 API，或者这只是一个 jquery-ui 错误。这些是我设置的选项：

$(".sortable").sortable({
    axis: "y",
    containment: "parent",
    cursor: "move",
    items: "li",
    tolerance: "pointer",
});

容器的CSS如下：

.list-holder {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

这个jsFiddle显示了两种情况，有滚动和没有滚动。

score -1 · Accepted Answer

将此代码添加到您的 ul

ul{
    max-height: 240px;
    overflow: hidden;
}

元素向下滚动是因为实际的列表高度仍然存在于页面中，即使它对我们不可见。

这是修改后的小提琴

1 回答 1