Ticket #5718 (closed bug: duplicate)

Opened 4 years ago

Last modified 13 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 2 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 2 years ago by clinisbut (previous) (diff)

comment:2 Changed 18 months ago by scott.gonzalez

  • Milestone changed from TBD to 2.0.0

comment:3 Changed 18 months 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 18 months ago by mikesherov (previous) (diff)

comment:4 Changed 18 months ago by mikesherov

#7278 is a duplicate of this ticket.

comment:5 Changed 18 months 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 18 months ago by mikesherov

#7983 is a duplicate of this ticket.

comment:7 Changed 18 months ago by mikesherov

#8073 is a duplicate of this ticket.

comment:8 Changed 18 months ago by mikesherov

#5039 is related

comment:9 follow-up: ↓ 10 Changed 15 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 15 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 13 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.