滚动时jQuery可排序包含中断答案

【问题标题】：jQuery sortable containment breaks when scrolling滚动时jQuery可排序包含中断
【发布时间】：2013-07-24 15:48:12
【问题描述】：

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

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

我不确定我是否遗漏了一些可排序的 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 显示了两种情况，包括滚动和不滚动。

【问题讨论】：

【解决方案1】：

将此代码添加到您的 ul 中

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

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

这里是修改后的fiddle

【讨论】：