Search and Top Navigation
#9960 open bug ()
Opened April 02, 2014 07:51AM UTC
Last modified August 19, 2014 12:29PM UTC
Draggable: Position of helper is not correctly updated when user is scrolling during dragging
Reported by: | brennweite | Owned by: | brennweite |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.draggable | Version: | 1.10.4 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
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.
Attachments (0)
Change History (14)
Changed April 02, 2014 01:24PM UTC by comment:1
owner: | → brennweite |
---|---|
status: | new → pending |
Changed April 02, 2014 02:42PM UTC by comment:2
status: | pending → new |
---|
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.
Changed April 09, 2014 10:08PM UTC by comment:3
I have a jsfiddle of this problem without any position absolutes: http://jsfiddle.net/jribble/MLcCc/
Changed April 10, 2014 06:05AM UTC by comment:4
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.
Changed April 10, 2014 06:25AM UTC by comment:5
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.
Changed April 10, 2014 07:14AM UTC by comment:6
The current code in git does not fix this issue. It is still broken. Please use the original example for reproducing this bug:
Changed April 10, 2014 12:21PM UTC by comment:7
status: | new → pending |
---|
Replying to [comment:6 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
gridoption though.
Changed April 10, 2014 01:11PM UTC by comment:8
status: | pending → new |
---|
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.
Changed April 10, 2014 02:52PM UTC by comment:9
status: | new → pending |
---|
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?
Changed April 10, 2014 02:58PM UTC by comment:10
status: | pending → new |
---|
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.
Changed April 10, 2014 04:20PM UTC by comment:11
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?
Changed April 10, 2014 05:15PM UTC by comment:12
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.
Changed August 19, 2014 12:19PM UTC by comment:13
status: | new → open |
---|
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.
Changed August 19, 2014 12:29PM UTC by comment:14
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.
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.