Question

请先检查这个几乎相同的问题：jQuery Sortable List - scroll bar jumps up when sorting

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

以下是重现

的方法

创建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概念后的代码（在accepted answer中）（没有运气）

我可以尝试理解它为什么会发生（列表得到“缩短”一小段时间），但所有尝试使用占位符或帮助程序以避免它也不起作用。我觉得我几乎没有尝试“可滚动”选项的任何排列而没有运气

我试过的浏览器

IE9，Firefox 10.0.1和Chrome 17

JQuery版本

核心1.7.1，UI v 1.8.17

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

Answer 1

如果您通过添加：

修改.scroll元素的CSS

position:relative;

那应该解决这个问题。

Answer 2

即使没有overflow-y:scroll属性，也可以将height添加到可排序列表中。它只显示一个禁用的滚动条，但没关系。

Answer 3

아래로스크롤할때는이런으으으하면됩니다。

var cY = -1;
var base = 0;
$("").sortable({
  sort: function(event, ui) {
    var nextCY = event.pageY;
    if(cY - nextCY < -10){
      if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) {
        base = base === 0 ? event.clientY : base;
        var move = event.clientY - base;
        var curScrollY = $(document).scrollTop();
        $(document).scrollTop(curScrollY + move+3);
        base = event.clientY;
      }
    }
  },
  // .....
});

Answer 4

这是由于在排序时（在创建占位符之前）容器更改的高度引起的

这个问题在这个堆栈溢出中得到了很好的描述和回答：https://stackoverflow.com/a/32477389/2604980

Answer 5

对于我来说，如果您不想从正文中删除溢出的CSS，则此可排序选项有效：

    start(e, ui) {
      if (fixOffset) ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
      fixOffset = true;
    },
    change(e, ui) {
      ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
    },
    stop(e, ui) {
      ui.item.css('transform', 'translateY(0)');
    },

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

5 个答案: