Tomas M Tomas M - 4 months ago 8x
Javascript Question

Jquery UI sortable on scrolled webpage

There seems to be a problem with jquery ui sortable plugin on a scrolled webpage. I'm using it to reorder table rows (and to move them from one table to another). When the website is scrolled, the drag&drop from the bottom table to the top table doesn't behave correctly IMHO. The dragged element's placeholder is not inserted to the new table at the very bottom position, but rather few rows after it. Sometimes it's 2, sometimes even 3 rows above. Until the mouse cursor goes up, it's broken. As soon as mouse goes at least 1 pixel down, it gets repositioned and fixed.

This is screenshot how it works when page is not scrolled (on the left), and later the very same page when its scrolled a bit (right):

enter image description here

Code is straightforward:

$( ".sortable tbody" ).sortable({"axis": "y", "cursor": "move", 'tolerance': 'pointer', 'cursorAt': { top: 20, left: 20 }, 'scroll': false,
"connectWith": $('.sortable tbody'),
"items" : 'tr:not(.nosort)'



How can I fix this? The goal is to ensure that it behaves the same like if the webpage is not scrolled.

I was playing with it whole day, tried all possible parameters of jquery ui, even tried to digg into the source code, but I wasn't successful.


I actually paid somebody hard cash to find out what the bug is. The bugfix is one-liner.

-    axis = floating ? "clientX" : "clientY";
+    axis = floating ? "pageX" : "pageY";

I'm going to attempt to propagate the fix to jquery-ui sources.

Update: it took about a year but the change should be finally accepted in jquery UI current.