#3740 closed bug (duplicate)

Opened January 02, 2009 10:06PM UTC

Closed March 17, 2013 02:57PM UTC

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)
  • after_fix.png (37.1 KB) - added by jink January 02, 2009 10:22PM UTC.

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

  • before_fix.png (46.6 KB) - added by jink January 02, 2009 10:22PM UTC.

    This is using the standard offset (position).

  • draggable_offset_bug.htm (2.0 KB) - added by satch December 11, 2009 10:11PM UTC.
Change History (23)

Changed January 04, 2009 03:47AM UTC by scottgonzalez comment:1

milestone: TBD → 1.6
priority: major → critical

Changed January 07, 2009 05:51PM UTC by paul comment:2

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

Changed January 09, 2009 01:45PM UTC by paul comment:3

resolution: → worksforme
status: new → closed

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

Changed December 11, 2009 10:13PM UTC by satch comment:4

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.

Changed December 12, 2009 12:23AM UTC by scottgonzalez comment:5

resolution: worksforme
status: closed → reopened

Changed December 12, 2009 12:23AM UTC by scottgonzalez comment:6

milestone: 1.7 → 1.8

Changed February 24, 2010 05:17PM UTC by rdworth comment:7

owner: → rdworth
status: reopened → assigned

Changed October 19, 2010 03:45PM UTC by scottgonzalez comment:8

priority: critical → major

Changed August 08, 2011 11:48PM UTC by comp615 comment:9

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!

Changed August 23, 2011 07:53AM UTC by ergec comment:10

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

Changed May 09, 2012 01:01PM UTC by clinisbut comment:11

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

Changed May 11, 2012 05:22PM UTC by molecularbear comment:12

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"

Changed July 05, 2012 12:11AM UTC by marojejian comment:13

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

Changed July 26, 2012 09:51AM UTC by vor comment:14

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));

Changed August 20, 2012 05:58PM UTC by Flow01 comment:15

_comment0: I have this issue, too in Chrome 21 (current) 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 in CHROME - this also happens on jQuery UI demo pages (open in new window). \ \ I can grant some jQuery UI developer access to my website to test - I'm not able to create jsfiddle for that because in jsfiddle it works. → 1345485643034459
_comment1: I have this issue, too in Chrome 21 (current) 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 in CHROME - this also happens on jQuery UI demo pages (open in new window). \ \ I can grant some jQuery UI developer access to my website to test - I'm not able to create jsfiddle for that because in jsfiddle it (usually) works. \ \ Firefox - OK \ Chrome - Not OK → 1345488841554945
_comment2: I have this issue, too in Chrome 21 (current) 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 in CHROME - this also happens on jQuery UI demo pages (open in new window). \ \ 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 offet like -500px straight away - not even comparable to this simple demo where it's almost not visible). \ → 1345495281718976

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).

Changed August 24, 2012 07:57PM UTC by majcherek2048 comment:16

_comment0: 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 related, 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 ;) \ \ 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. → 1345839913784628
_comment1: 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 fix 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. → 1345839956441634
_comment2: 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. → 1345841363210885

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.

Changed August 25, 2012 09:34AM UTC by Flow01 comment:17

_comment0: Video of bug: https://rapidshare.com/files/1828033109/jQuery bug - Copy.mp4 (Chrome 21) (see - it's different than JSFiddle) \ \ Thank you @majcherek2048 for workarounds and suggestions :) → 1345887300484968
_comment1: Video of bug: [https://rapidshare.com/files/1828033109/jQuery bug - Copy.mp4] (Chrome 21) (see - it's different than JSFiddle) \ \ Thank you @majcherek2048 for workarounds and suggestions :) → 1345887348114181
_comment2: 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 :) → 1345887436238721

Video of bug: https://rapidshare.com/files/1828033109/jQuery%20bug%20-%20Copy.mp4 (Chrome 21) (it's different than JSFiddle).

Thank you @majcherek2048 for workarounds and suggestions :)

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:18

milestone: 1.9.0 → 2.0.0

Changed October 19, 2012 05:53PM UTC by mikesherov comment:19

owner: rdworth
status: assigned → open

Changed October 28, 2012 08:58PM UTC by mikesherov comment:20

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.

Changed March 17, 2013 02:37PM UTC by mikesherov comment:21

keywords: scroll position internet explorer
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/

Changed March 17, 2013 02:38PM UTC by mikesherov comment:22

patch doesn't work in FF :-\\

Changed March 17, 2013 02:57PM UTC by mikesherov comment:23

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/