UI Sortable moves scroll

Question

I have issue with jQuery sortable.

Here is live example: 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;
}

In this case I have div with scroll. I scroll to the end of the div and I try to sort element using drag&drop. After this action, scroll in div jumps to beginning of this div. How I can "remember" position of scroll and "revert" it after sortable?

Answer 1

You need to save the scroll position and then reapply it when you stop moving the object.

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

You should use the sortable() method on the inner <div id="b"> and put every element you want to sort inside a <div> tag so they can be treated as DOM elements. Here's a working solution JSFiddle You might want to check THIS topic.