Opened 15 years ago

Closed 11 years ago

#3740 closed bug (duplicate)

Draggable: scrolled draggable has incorrect position

Reported by: jink Owned by:
Priority: major Milestone: 2.0.0
Component: ui.draggable Version: 1.6rc4
Keywords: Cc:
Blocked by: Blocking:

Description

The jQuery UI's draggable helper is using the wrong offset. The _mouseDrag function sets the helper style as such: 

if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';

Unfortunately, in Internet Explorer this causes the helper to have an incorrect offset when the page is scrolled. In Internet Explorer, the position and absolute position vary greatly. Using the position value causes the helper's top to be -1*(scroll offset) off, causing the helper to be off of the mouse cursor by the scroll offset.

Changing _mouseDrag to use positionAbs, such as: 

if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.positionAbs.left+'px';
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.positionAbs.top+'px';

fixes this problem completely. I have tested this change in Internet Explorer 7, Opera 9.63 and Firefox 3.0.5. Any advice on this change?

Attachments (3)

before_fix.png​ (46.6 KB) - added by jink 15 years ago.
This is using the standard offset (position).
after_fix.png​ (37.1 KB) - added by jink 15 years ago.
This is using the absolute position (notice the mouse cursor being on the object).
draggable_offset_bug.htm​ (2.0 KB) - added by satch 14 years ago.

Download all attachments as: .zip

Change History (26)

Changed 15 years ago by jink

Attachment: before_fix.png​ added

This is using the standard offset (position).

Changed 15 years ago by jink

Attachment: after_fix.png​ added

This is using the absolute position (notice the mouse cursor being on the object).

comment:1 Changed 15 years ago by Scott González

Milestone: TBD → 1.6
Priority: major → critical

comment:2 Changed 15 years ago by paul

Could you please post your test case as well? I have trouble reproducing the issue. We have a large test page for testing scroll offsets as well here, if that helps: ​http://jquery-ui.googlecode.com/svn/trunk/tests/visual/draggable.scroll.html

comment:3 Changed 15 years ago by paul

Resolution: → worksforme
Status: new → closed

Not reproducable by me, therefore closed at worksforme. If it still happens for you, please reopen the ticket.

Changed 14 years ago by satch

Attachment: draggable_offset_bug.htm​ added

comment:4 Changed 14 years ago by satch

This is definitely reproducable and still an issue in 1.7.2. See attached draggable_offset_bug.html for example.

To see in "action", attempt to drag from "Source #2" to the "Target" to the left. You will see that the helper clone is visually correct, but the starting offset for dragging is not (nor is starting position for "revert" either, but different issue, me thinks).

You can also reproduce in "y" axis (change 'x' to 'y' in demo script ...duh).

Remove axis restriction and behaves ok.

comment:5 Changed 14 years ago by Scott González

Resolution: worksforme
Status: closed → reopened

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

Milestone: 1.7 → 1.8

comment:7 Changed 14 years ago by rdworth

Owner: set to rdworth
Status: reopened → assigned

comment:8 Changed 13 years ago by Scott González

Priority: critical → major

comment:9 Changed 12 years ago by comp615

Just wanted to note that this is still a major issue (essentially makes the plugin useless...? Unfortunately the fix given above does not fix it for me. Based on this: ​http://stackoverflow.com/questions/5791886/jquery-draggable-shows-helper-in-wrong-place-when-scrolled-down-page

I was able to fix it by setting overflow: auto, but that of course looks terrible :( and position absolute, same thing. any ideas would be great!

comment:10 Changed 12 years ago by ergec

Here is jsbin link for this problem UI version 1.8.16 ​http://jsbin.com/imawuk/6

comment:11 Changed 11 years ago by clinisbut

I've seen this problem in all browsers (firefox, opera, chrome) not only in IE.

comment:12 Changed 11 years ago by molecularbear

I also see this problem in Chrome 18 and Firefox 12, using jquery 1.7.2 and jquery-ui 1.18.20.

​http://jsfiddle.net/wVjhc/1/ (drag the red box off the screen to the right to activate the autoscroll, then drag it back and you'll see it separating from the mouse cursor)

I am able to workaround this bug by specifying my draggable as "position: fixed"

comment:13 Changed 11 years ago by marojejian

This is still and issue for me in chrome. The fixes listed don't seem to work either

comment:14 Changed 11 years ago by vor

Perhaps do I miss something about those this.scrollParent addition but to me that patch seem to work everywhere : 

(function($){
	$.ui.draggable.prototype._getRelativeOffset = function()
	{
		if(this.cssPosition == "relative") {
			var p = this.element.position();
			return {
				top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/,
				left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/
			};
		} else {
			return { top: 0, left: 0 };
		}
	};
}(jQuery));

comment:15 Changed 11 years ago by Flow01

I have this issue, too in Chrome 21 (current), Firefox 14.0.1 and in Chrome Canary (22-23). This happens only under certain conditions - you have to experiment with <BODY> scroll and <HTML> tag (overflow property). Basically, on my website I have no CSS properties for <HTML> and I have overflow-x: hidden; for BODY and exactly this happens.

I can grant some jQuery UI developer access to my website to test.

This is some example jsfiddle: ​http://jsfiddle.net/dtSmH/ - try to drag upwards (but on my website this bug is SOOOOOO much worse because you only click and it gets offset like -500px straight away - not even comparable to this simple demo where it's almost not visible and it does it in 'animated' way).

Last edited 11 years ago by Flow01 (previous) (diff)

comment:16 Changed 11 years ago by majcherek2048

Hi there. I quickly jump in to this discussion as I have the same issue. I've been fiddling around for a while now, trying to find a patching solution for my own site, rather that a fix, so sorry about that.

I did however make an interesting discovery. It seems that the issue is browser specific, and this can be tested using the following code: 

drag: function(event, ui)
{
  if($.browser.msie || $.browser.mozilla)
  {
    ui.position.top -= $('html').scrollTop();
  }
  else
  {
    ui.position.top -= $('body').scrollTop();
  }
}

Please note, that while this patches the problem (in a bad way!), this doesn't work if you make an initial scroll before starting the drag. Why and how to fix this is out of my scope ;) (Edit note: I've now fixed this by adding a function to the start event.)

I hope this helps the assigned person solve the issue, as this bug can be quite annoying, and actually makes the plugin useless to me.

Edit (once again): Here's a working example on jsfiddle: ​http://jsfiddle.net/AWeeE/ As you can see, if you remove the start and drag functions the box will start to behave oddly, when dragging it down so it scrolls.

Last edited 11 years ago by majcherek2048 (previous) (diff)

comment:17 Changed 11 years ago by Flow01

Video of bug: ​https://rapidshare.com/files/1828033109/jQuery bug - Copy.mp4 (copy with spaces - formatting broke) (Chrome 21) (it's different than JSFiddle).

Thank you @majcherek2048 for workarounds and suggestions :)

Version 2, edited 11 years ago by Flow01 (previous) (next) (diff)

comment:18 Changed 11 years ago by Scott González

Milestone: 1.9.0 → 2.0.0

comment:19 Changed 11 years ago by mikesherov

Owner: rdworth deleted
Status: assigned → open

comment:20 Changed 11 years ago by mikesherov

Summary: Draggable helper offset using incorrect left/top offset, needs to use positionAbsolute. → Draggable: helper offset using incorrect left/top offset, needs to use positionAbsolute.

comment:21 Changed 11 years ago by mikesherov

Keywords: scroll position internet explorer removed
Summary: Draggable: helper offset using incorrect left/top offset, needs to use positionAbsolute. → Draggable: scrolled draggable has incorrect position

Proof of working patch: ​http://jsfiddle.net/AWeeE/22/

comment:22 Changed 11 years ago by mikesherov

patch doesn't work in FF :-\

comment:23 Changed 11 years ago by mikesherov

Resolution: → duplicate
Status: open → closed

Duplicate of #6817.
It all worked out better than expected! This is a dupe because git works now: ​http://jsfiddle.net/AWeeE/23/

Note: See TracTickets for help on using tickets.