JQuery UI可在可滚动容器中排序 - 在排序时滚动位置"跳转"

Question

请首先检查这个几乎相同的问题:jQuery Sortable List - 滚动条在排序时跳起来

我有完全相同的问题,只是我尝试了所有建议的解决方案,没有运气

这是重现的方式

• 创建一个可排序的列表
• 让它可滚动
• 向下滚动
• 重新订购商品
• 滚动位置"跳"起来

这是代码(另见JSFiddle)

HTML

<ul id="panel" class="scroll">
    <li class="content" style="background-color:red">item1</li>
    <li class="content" style="background-color:green">item2</li>
    <li class="content" style="background-color:blue">item3</li>
    <li class="content" style="background-color:gray">item4</li>
    <li class="content" style="background-color:yellow">item5</li>    
</ul>?

JavaScript的

$(function() {
    $("#panel").sortable({
        items: ".content",
        forcePlaceholderSize: true
    }).disableSelection();
    $(".content").disableSelection();

});?

CSS

.scroll{
    overflow: scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
}
.content{
    height: 50px;
    width: 100%;
}
?

尝试接受答案的概念之后的代码(在JSFiddle中)(没有运气)

我可以尝试理解它为什么会发生(列表得到"缩短"一小段时间),但所有尝试使用占位符或助手来避免它也不起作用.我觉得我几乎没有尝试任何"滚动"选项的排列,没有运气

浏览器我试过

IE9,Firefox 10.0.1和Chrome 17

JQuery版本

核心1.7.1,UI v 1.8.17

难道我做错了什么？有解决方案吗？它可能是一个错误吗？

Answer 1

如果您通过添加以下内容来修改元素的 CSS .scroll：

position:relative;

这应该可以解决这个问题。