JQuery UI is sorted in a scrollable container - scroll position “jumps” when sorting

Question

First check out this almost identical question: jQuery Sortable List - scrollbar is inserted when sorting

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

Here is the playback method

• create a sorted list
• scroll
• scroll down
• reorder items
• scroll position jumps up

Here is the code (see also 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 to use the concept of answer (no luck)

I can try to understand why this happens (the list gets “abbreviated" for a quick second), but all attempts to use placeholders or helpers to avoid this did not work either. I feel like I tried almost any permutation of “scrollable” options without any luck

The 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? Maybe this is a mistake?

Answer 1

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

 position:relative; 

This should solve this problem.

Answer 2

Adding overflow-y:scroll to the sorted list, even without the height property, solved it for me. It only shows the disabled scrollbar, but this is normal.

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

It seems that jQuery 1.9.2 user interface solved the problem.

If you cannot change the library, there is a workaround that includes a simple scroll operation. The idea is simple:

• Keep the previous scroll position each time you scroll.
• Sets the scroll back to the previous position when you start dragging your item.

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 eg $("#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 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 eg $("#YourPanel").onscroll }; $("#YourSortablePanel").sortable({ start: function (event, ui) { $(document).scrollTop(tempScrollPosition); } }); 

Answer 5

This is caused by a change in container height during sorting (immediately before creating a placeholder)

The problem is well described and answered in this stack overflow: fooobar.com/questions/204602 / ...