Sortable: Jump when dragging item from page scrolled to bottom

Sorry, meant to assign this to the ui.sortable component...

Seems this is related to the offsets calculated at the time the helper is created. If the sortable has the helper option set to 'clone', the page flash/jump still occurs, but the second flash/jump (as described on the test page linked to above), does not.

Sorry - I just updated my website, and it broke the link to the example. I will fix it this evening after work.

I have fixed the link to the demonstration of the bug. Sorry about that.

I had this same problem with an unrelated project where I was removing a large number of <br /> tags from a div on a click event. Somehow, removing the breaks caused Firefox to refresh the entire screen, and Safari to jump around.

For Safari's jumping, I grabbed the scrollTop before removing the breaks, then set it back to the previous value after removing. var scrollTop = $(window).scrollTop(); ...remove... $(window)scrollTop(scrollTop);

Firefox was tougher, and didn't respond to the scrollTop fix. I tried just hiding the breaks (display: none, addClass('myHiddenStyle') rather than removing them. I tried removing them after fading them out. Neither worked. My solution was to make the breaks position: absolute before removing them. $(breakItem).css('position', 'absolute').remove();

This also occurs in Chrome 5.0.307.11 beta (Mac). Setting a CSS height on the containing element seems to alleviate the problem, but it's a pain to have to calculate that every time an element is added or removed from the sortable list.

Any updates on this issue. Though I think the issue is more with FF since I no longer see the jump/flash in IE7/8, Chrome or Safari.

This bug still exists in the latest version of ui (1.8.9)

I have tested this on firefox 3.6.8, IE7, IE8 & Safari 4.04

It only occurs when the sortable list items dictate the height of the page, which is a real issue when dealing with larger lists or a sortable interface.

A quick and dirty fix is to get the document height and assign it to the body tag after each drag, but this seems to offset the drop in IE7.

Still seeing this in 1.8.16 in the previously mentioned browsers in Firefox 7 and Chrome 15.0.874.121 on Windows and Linux.

Test case against master - http://jsfiddle.net/tj_vantoll/CVPtJ/. I don't see the flash anymore but all browsers display the jump when the drag starts on the last item.

#9309 is a duplicate of this ticket.

Much nicer test case from @KaneCohen in #9309: http://jsfiddle.net/TnCZ8/.

"Problem occurs when sortable list happens to be at the bottom of the page with scollbar. If you try to sort, window scroll will jump up for a height of a sortable item. Could be seen here: http://jsfiddle.net/TnCZ8/.

Resize your browser so that there's a scrollbar and try to sort)"

I also removed the "flash" portion from the title since no one has been able to recreate that in a LONG time. The jump is still there and re-creatable.

We've detect this problem on our application and fix it by setting the min-height of the container of the sortable elements so that the size of the container didn't change when the DOM is modified to render the sortable ui effect

the code look like this :

// change the internal _mouseStart method to inject a min-height on our sotable container
var originalStart = sortableInst._mouseStart; 
sortableInst._mouseStart = function () { 
that._displayTable.css('min-height', that._displayTable.height()); 
originalStart.apply(sortableInst, arguments); 
};

[...]

// reset this min-height value when the Updated event is raised (when all DOM operations are done in the sortable widget)
_onSortUpdated: function () { 
this._displayTable.css('min-height', ""); 
},

This could be an idea on how to fix this problem, even if some other consideration should be take into account

like keeping the original value of min-height to set back this value at the end instead of setting the value to an empty string like in this example.

Hope this help

I fixed "scroll jumping" in my project by remembering scroll position before helper becomes absolutely positioned (https://github.com/jquery/jquery-ui/blob/master/ui/sortable.js#L227) and restoring scroll position after placeholder is created and updated (https://github.com/jquery/jquery-ui/blob/master/ui/sortable.js#L247)

Test case with "brute-force" proof of concept: http://jsfiddle.net/CVPtJ/2/

If it is OK, I can incorporate those changes into _mouseStart and make a pull request.

This has been fixed for a while, likely from 8e899dab6cd1fc410bbda0e7c88cdf1a1c8e9764.