UI 可排序移动滚动

Question

我对 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 的开头。我如何 "remember" 滚动位置和 "revert" 排序后的位置？

Answer 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);
        }
    });
});

Answer 2

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

UI 可排序移动滚动

UI Sortable moves scroll

javascript

jquery

scroll

jquery-ui

jquery-ui-sortable