Javascript JQuery UI可在可滚动容器中排序-滚动位置“；“跳跃”；分拣时

请先检查这个几乎相同的问题：

我也有同样的问题，只是我在那里尝试了所有建议的解决方案，但没有成功

以下是复制的方法

• 创建一个
• 让它可以滚动
• 向下滚动
• 重新订购项目
• 滚动位置“跳跃”向上

以下是代码（另请参见中的）

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>​

CSS

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

这是在尝试了（没有运气）的概念之后的代码（在中）

我可以试着理解为什么会发生这种情况（ListGet“缩短”了一秒钟），但所有使用占位符或助手来避免这种情况的尝试都没有奏效。我觉得我尝试了几乎所有的“可滚动”选项的排列，但没有成功

我尝试的浏览器

IE9、Firefox 10.0.1和Chrome 17

JQuery版本

核心1.7.1，UI v 1.8.17

---

我做错什么了吗？有解决办法吗？可能是虫子吗

如果您修改了

元素的CSS，请通过添加以下内容滚动
元素：

position:relative;

这应该可以解决这个问题。
添加
overflow-y:scroll
到可排序列表，即使没有
height
属性也可以解决这个问题。它只显示一个被禁用的滚动条，但这没关系。
似乎jQueryUI1.9.2解决了这个问题

如果无法更改库，则有一种解决方法，包括简单的滚动条操作。想法很简单：


每次滚动时保持上一个滚动位置
开始拖动图元时，将“滚动”设置回上一个位置

给你

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;

window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
    }, 250));

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};

$("#YourSortablePanel").sortable({
    start: function (event, ui) {
        $(document).scrollTop(tempScrollPosition);
    }
});

这是由于排序时容器的高度发生了变化（就在创建占位符之前）

这个问题在这个堆栈溢出中得到了很好的描述和回答：
아래로 스크롤 할때 는 이런식으로 하면 됩니다.

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;
      }
    }
  },
  // .....
});

var-cY=-1；
var基数=0；
$（“”）。可排序({
排序：函数（事件、用户界面）{
var nextCY=event.pageY；
如果（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 curscorly=$（document.scrollTop（）；
$（文档）.scrollTop（粗略+移动+3）；
base=event.clientY；
}
}
},
// .....
});
对于我来说，如果您不想从正文中删除溢出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)');
    },

美好的它解决了最底层项目的问题，但其他项目似乎仍然存在问题。问题很清楚。你已经用非英语写了答案。因为我不会写英语。
    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)');
    },