UI Sortable 移动滚动答案

【问题标题】：UI Sortable moves scrollUI Sortable 移动滚动
【发布时间】：2016-03-22 14:49:29
【问题描述】：

我对 jQuery 可排序有疑问。

这里是实时示例：JSFiddle

HTML：

<div class="a">
  <div class="b">
    a<br>
    b<br>
    c<br>
    d<br>
    e<br>
    f<br>
    g<br>
    h<br>
    i<br>
    j<br>
    k<br>
    l<br>
    m<br>
    n<br>
    o<br>
  </div>
</div>

JS：

$(function(){
    $('.a').sortable();
});

CSS：

.b {
  border: 1px solid;
  width: 100px;
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
}

在这种情况下，我有带有滚动的 div。我滚动到 div 的末尾，并尝试使用拖放对元素进行排序。此操作后，在 div 中滚动会跳转到此 div 的开头。如何“记住”滚动位置并在可排序后“还原”它？

【问题讨论】：

它移动所有层，而不仅仅是元素。您确定小提琴会重现您的问题吗？如果是，请添加更多详细信息或更好地解释您需要什么，因为很难看到。
实际上你需要再添加一个带有滚动框的内部div（类'b'）

标签： javascript jquery jquery-ui scroll jquery-ui-sortable

【解决方案1】：

您需要保存滚动位置，然后在停止移动对象时重新应用它。

JSFIDDLE：JSFIDDLE

$(function(){
    var scrollTop = 0;
    $('.a').sortable({
        start: function(event, ui){
          scrollTop = ui.item.scrollTop();
        },
        stop: function(event, ui){
          ui.item.scrollTop(scrollTop);
        }
    });
});

【讨论】：

【解决方案2】：

您应该在内部<div id="b"> 上使用sortable() 方法，并将要排序的每个元素放在<div> 标记内，以便它们可以被视为DOM 元素。这是一个有效的解决方案JSFiddle 您可能想查看THIS 主题。

【讨论】：