Opened 10 years ago

Closed 6 years ago

Last modified 2 years ago

#4802 closed bug (invalid)

Sortable: jump when moving element

Reported by: ben_cms Owned by: ben_cms
Priority: major Milestone: 2.0.0
Component: ui.sortable Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:

Description

Unfortunately bug #3591 doesn't seem to have gone away... This is the case with long lists of sortable elements. If you try the sortable demo (http://jqueryui.com/demos/sortable/default.html) you can see it by resizing your browser so that you activate the scrollbar. Then if you go to the very end of the page and try to move an element you can see a "jump" (it is quite subtle on the demo page) which can be very disturbing when the height of the element is important.

This behaviour occurs in IE7 and FF3 at least.

Change History (11)

comment:1 Changed 9 years ago by Jörn Zaefferer

Milestone: TBD1.8

comment:2 Changed 8 years ago by sutherland

This appears to be an issue in Sortable's _mouseStart().

Here, the sortable helper is absolutely-positioned before the placeholder is created/inserted. This results in a "jump" (as viewed from page bottom) because the document height shrinks when the helper is abs-positioned. One solution: create the placeholder before the helper is abs-positioned. I did a quick test; seems to fix the "jump".

comment:3 Changed 8 years ago by honda

I second that, issue with scroll jump can be removed simply by moving 'this._createPlaceholder();' from line 185(jquery.ui.sortable.js) just before line 156, where helper gets position:absolute. I have no clue if it affects further offset calculations, but it seems to work for my case with nested sortables.

Other way is to set height of currentItem's parent just before repositioning helper and unset that after creation of placeholder.

comment:4 Changed 6 years ago by Scott González

Milestone: 1.9.02.0.0

comment:5 Changed 6 years ago by mikesherov

Owner: set to ben_cms
Status: newpending
Summary: Sortable jump when moving elementSortable: jump when moving element

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI using the info provided. http://jqueryui.com/sortable

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!

comment:6 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

comment:7 Changed 6 years ago by habermann24

I just tested this with current jquery ui 1.10.3 and for me the issue still exists. It is easily fixed by the suggestions above (by moving this._createPlaceholder(); before the absolute positioning of the helper).

As far as i can see, the change doesn't brake anything, so please patch this. Should i just add a pull request to the github repo?

comment:8 in reply to:  7 Changed 6 years ago by tj.vantoll

Replying to habermann24:

I just tested this with current jquery ui 1.10.3 and for me the issue still exists. It is easily fixed by the suggestions above (by moving this._createPlaceholder(); before the absolute positioning of the helper).

As far as i can see, the change doesn't brake anything, so please patch this. Should i just add a pull request to the github repo?

Hi habermann24,

We need a reduced test case showing the issue in order to look into this. You can use this to get started http://jsfiddle.net/tj_vantoll/YMnwU/.

comment:9 Changed 5 years ago by nsimoes

I could reproduce this on a project I've been working on.

You can check it out on http://jsfiddle.net/BDNVK/

If you scroll on the list and the try to reorder, the element jumps top. It is achieved by the combination of overflow:auto on the body and position:relative on the container.

Hope it helps...

comment:10 in reply to:  9 Changed 5 years ago by tj.vantoll

Replying to nsimoes:

I could reproduce this on a project I've been working on.

You can check it out on http://jsfiddle.net/BDNVK/

If you scroll on the list and the try to reorder, the element jumps top. It is achieved by the combination of overflow:auto on the body and position:relative on the container.

Hope it helps...

Thanks nsimoes. That problem is covered by #9588, but your test case helps.

comment:11 Changed 2 years ago by Denis

The problem still exist...

Note: See TracTickets for help on using tickets.