Ticket #5718 (closed bug: duplicate)

Opened 4 years ago

Last modified 19 months ago

Draggable: distance between element and cursor increases when vertically scrolling during drag

Reported by: cattz Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.draggable Version: 1.8.2
Keywords: ui.draggable scroll Cc:
Blocking: Blocked by:

Description

Hi,

This problem is appeared since the v1.8 (no problem in 1.7 versions). When I move my draggable element outside the visible page (when the page scroll -> scroll:'true'), the draggable element doesnt appear beside my cursor but x pixels on top or bottom of my cursor. This phenomenon only occurs during a vertical autoscroll, not with horizontal autoscroll.

My code :

$(id_class_html).draggable( {handle : '.drg', revert:true, scroll:true, scrollSensitivity : 10, zIndex : 100, containment : 'document', revertDuration : 0, scrollSpeed : 45, opacity: 0.80, cursor: 'move', drag : function(event, ui) {...} });

Thanks Cattz

Change History

comment:1 Changed 3 years ago by clinisbut

Same problem here. The position of the element being dragged seems to be incremented as you scroll.

However, I've found that if the element has position:absolute this does not occur. You can try it here:  http://jsfiddle.net/hMdZj/ Try to drag the box down to no-visible areas. If you remove the position:absolute the bug appears.

Last edited 3 years ago by clinisbut (previous) (diff)

comment:2 Changed 2 years ago by scott.gonzalez

  • Milestone changed from TBD to 2.0.0

comment:3 Changed 2 years ago by mikesherov

  • Status changed from new to open

confirmed on latest:  http://jsfiddle.net/9xrf4/

simply drag the draggable to the edge of the window, and as the page scrolls to accomodate, notice it moves away from the cursor

Last edited 2 years ago by mikesherov (previous) (diff)

comment:4 Changed 2 years ago by mikesherov

#7278 is a duplicate of this ticket.

comment:5 Changed 2 years ago by mikesherov

  • Summary changed from Problem with autoscroll when dragging an element (vertical drag) to Draggable: distance between element and cursor increases when vertically scrolling during drag

comment:6 Changed 2 years ago by mikesherov

#7983 is a duplicate of this ticket.

comment:7 Changed 2 years ago by mikesherov

#8073 is a duplicate of this ticket.

comment:8 Changed 2 years ago by mikesherov

#5039 is related

comment:9 follow-up: ↓ 10 Changed 21 months ago by dhmitchell

I've hacked a solution but I'm not sure of the root cause nor why the solution (which is trivial) wouldn't always be the right thing to do: in draggable.js: _mouseDrag (L 205), compute this.helper[0].style.top = (event.pageY - this.originalPageY) +"px"

My observation is that pageY was changing much less rapidly than scrollTop() although they should have changed at exactly the same rate afaik. I actually believe pageY was wrong, but it's where the mouse is and subsequent events are reported by the mouse's posit; so, it's where the helper should be. Given this, I'm not sure there's a reason to call _generatePosition nor _convertPositionTo and that the helper's top and left could be simple computations of (original)page(X|Y).

if this fix seems sound, I'm happy to do the official process.

comment:10 in reply to: ↑ 9 Changed 21 months ago by tj.vantoll

Replying to dhmitchell:

I've hacked a solution but I'm not sure of the root cause nor why the solution (which is trivial) wouldn't always be the right thing to do: in draggable.js: _mouseDrag (L 205), compute this.helper[0].style.top = (event.pageY - this.originalPageY) +"px"

My observation is that pageY was changing much less rapidly than scrollTop() although they should have changed at exactly the same rate afaik. I actually believe pageY was wrong, but it's where the mouse is and subsequent events are reported by the mouse's posit; so, it's where the helper should be. Given this, I'm not sure there's a reason to call _generatePosition nor _convertPositionTo and that the helper's top and left could be simple computations of (original)page(X|Y).

if this fix seems sound, I'm happy to do the official process.

I believe that the code there is specifically for dealing with helpers ( http://api.jqueryui.com/draggable/#option-helper). In general though if you can come up with a fix feel free to send a pull request. Keep in mind that we'll want tests along with the fix.

Thanks.

comment:11 Changed 19 months ago by mikesherov

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

Duplicate of #6817.

Note: See TracTickets for help on using tickets.