JQuery UI sortable in a scrollable container - scroll position "jumps" when sorting

Question

Please check this almost identical question first: jQuery Sortable List - scroll bar jumps up when sorting

I have exactly the same problem, only that I tried all the suggested solutions there with no luck

Here is the way to reproduce

• create a sortable list
• have it scrollable
• scroll down
• reorder items
• scroll position "jumps" up

Here is the code (see also in 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%;
}
​

Here is the code (in JSFiddle) after trying the notion of the accepted answer (with no luck)

I can try to understand why it happens (list get's "shortened" for a quick second), but all attempts to use placeholders or helpers to avoid it didn't work either. I feel I tried almost any permutation of the "scrollable" options with no luck

Browsers I tried

IE9, Firefox 10.0.1, and Chrome 17

JQuery versions

core 1.7.1, UI v 1.8.17

Am I doing something wrong? Is there a solution? Could it be a bug?

Answer 1

If you modifiy your CSS for the .scroll element by adding:

position:relative;

That should resolve this issue.

Answer 2

Adding overflow-y:scroll to the sortable list even without the height property solved it for me. It only shows a disabled scrollbar, but that's okay.

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

Seems like jQuery UI 1.9.2 solved the issue.

If you are unable to change the library, there's a workaround including a simple scroll bar operation. The idea is simple:

• Keep the previous scroll position every time you scroll.
• Set scroll back to the previous position when you start dragging your element.

Here you go;

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