Draggable: Position of helper is not correctly updated when user is scrolling during dragging

[brennweite]

Hello, I am fully aware that they are a lot of similiar bugs around, but none of them are actually describing this 100%. Furthermore those bugs are often on status closed, although this is still broken. Please see the fiddle for a demonstration. Also the 1.11pre GIT build is still showing this issue!

Contrary to the statements in some of the bugs, this bug also is present in jquery-ui versions prior to 1.10.3 and it also happens in all browsers, not only FF.

If you use draggable on a list, for example, which belongs to a div with position absolute and the parent div is on position relative, then the helper changes its distance to the cursor while scrolling during dragging. (for example scrolling with the mousewheel while you drag or when you have autoscroll activated)

If you remove the "position:relative/absolute" construction, it works just fine. The update of the position of the helper (top) should respect the scroll pixel value on the parent element in order to stay fixed with the cursor.

​http://jsfiddle.net/brennweite/vrAMR/17/

[tj.vantoll]

Hi brennweite,

Thanks for taking the time to contribute to jQuery UI. Are you specifically referring to using the mousewheel for scrolling? You can recreate that behavior with a very simple example: ​http://jsfiddle.net/tj_vantoll/g68hm/. I'm not positive, but I believe the widget doesn't support the use of the mousewheel.

I can't recreate any problems unless I use the mousewheel.

[brennweite]

Hello,

thank you very much for answering. No, it is not only the mousewheel. Here you will find another fiddle, where I have added some scroll areas for animating a scrolling instead of the mousewheel:

​http://jsfiddle.net/brennweite/Z4275/5/

So please start to drag an item and hover over the scroll areas to scroll up and down in the list while you keep dragging. Then you will also see that the helper moves away from the cursor with the same pixel value you are dragging. But it should stick with the cursor.

I can't use the auto-scroll feature of dragging because then you will get also a vertical scrollbar and push the ul out of the visible area. Therefore the scroll option is set to false.

Take a look at the #div2. The "position:absolute" is causing the problem. If you remove that, you break the layout but then it works. But IMHO draggable should also be usable in a div on position absolute.

[jribble]

I have a jsfiddle of this problem without any position absolutes: ​http://jsfiddle.net/jribble/MLcCc/

[jribble]

The current code in git has this issue fixed, however if you are using the draggable grid feature the grid snap will be off after scroll.

[jribble]

​http://jsfiddle.net/jribble/MLcCc/2/ example showing the grid problem - I'm thinking it should snap to the grid lines even if the div is scrolled.

[brennweite]

The current code in git does not fix this issue. It is still broken. Please use the original example for reproducing this bug: ​http://jsfiddle.net/brennweite/Z4275/5/

[tj.vantoll]

Replying to brennweite:

The current code in git does not fix this issue. It is still broken. Please use the original example for reproducing this bug: ​http://jsfiddle.net/brennweite/Z4275/5/

This jsFiddle is not actually using the latest code from git. This one is ​http://jsfiddle.net/tj_vantoll/Z4275/7/. I'm not seeing this issue there. brennweite, does that work for you?

Per ​http://jsfiddle.net/jribble/MLcCc/2/ there does seem to be an issue with scrolling and the grid option though.

[brennweite]

no, your fiddle also shows the bug. I have updated my fiddle to use the latest code from git. Please use:

​http://jsfiddle.net/brennweite/Z4275/

While dragging please use a) the mousewheel to scroll or b) hover over the scroll areas in the example. You will see that the helper moves away from the cursor while scrolling. This happens when the div is on position absolute. So in this case the position from the helper is not correctly updated.

Also in your example the bug happens, but you have to use the mousewheel as there is no other scrolling functionality.

[tj.vantoll]

The helper's position appears to be off, but corrects itself as soon as you move the mouse. Is that what you're seeing as well? If not what browser/OS are you using?

[brennweite]

yes, exactly. If you use a fixed layout without divs in absolute/relative, then the helper stays correctly fixed with the cursor. So the dymamic position change of the helper css does not respect the scrolling.

[tj.vantoll]

There's nothing we really can do here unless we explicitly listen for mousewheel or scroll events, which I don't believe we want to do. scott_gonzalez has this come up before? Thoughts?

[jribble]

Okay, I realize now from the discussion that I misread this bug and my issue is different. I created a different ticket (#9974) for the bug I'm seeing.

[mikesherov]

Scott, I know Dave already implemented this (adding a scroll listener to the scroll parent). Is that something we should back out or support in the new draggable?

Marking as open for now until Scott weighs in.

[Scott González]

We should probably handle this. Scrolling sucks, but I think we're gonna need to have explicit code for it in most of our widgets.