Ticket #3740 (closed bug: duplicate)

Opened 4 years ago

Last modified 2 months ago

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:
Blocking: Blocked by:

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

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

Change History

Changed 4 years ago by jink

This is using the standard offset (position).

Changed 4 years ago by jink

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

comment:1 Changed 4 years ago by scott.gonzalez

  • Priority changed from major to critical
  • Milestone changed from TBD to 1.6

comment:2 Changed 4 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 4 years ago by paul

  • Status changed from new to closed
  • Resolution set to worksforme

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

Changed 3 years ago by satch

comment:4 Changed 3 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 3 years ago by scott.gonzalez

  • Status changed from closed to reopened
  • Resolution worksforme deleted

comment:6 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.7 to 1.8

comment:7 Changed 3 years ago by rdworth

  • Owner set to rdworth
  • Status changed from reopened to assigned

comment:8 Changed 3 years ago by scott.gonzalez

  • Priority changed from critical to major

comment:9 Changed 22 months 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 21 months ago by ergec

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

comment:11 Changed 13 months ago by clinisbut

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

comment:12 Changed 13 months 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 months ago by marojejian

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

comment:14 Changed 10 months 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 9 months 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 9 months ago by Flow01 (previous) (diff)

comment:16 Changed 9 months 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 9 months ago by majcherek2048 (previous) (diff)

comment:17 Changed 9 months ago by Flow01

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

Last edited 9 months ago by Flow01 (previous) (diff)

comment:18 Changed 7 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:19 Changed 7 months ago by mikesherov

  • Owner rdworth deleted
  • Status changed from assigned to open

comment:20 Changed 7 months ago by mikesherov

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

comment:21 Changed 2 months ago by mikesherov

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

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

comment:22 Changed 2 months ago by mikesherov

patch doesn't work in FF :-\

comment:23 Changed 2 months ago by mikesherov

  • Status changed from open to closed
  • Resolution set to duplicate

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.