Opened 11 years ago

Last modified 8 years ago

#8477 open bug

Draggable - overflow: auto - non-visible elements involved in snapping

Reported by: jamesc Owned by:
Priority: minor Milestone: none
Component: ui.draggable Version: 1.8.21
Keywords: Cc:
Blocked by: Blocking:



jsFiddle w/ workaround:

When using draggable snapped to targets within a div that's set to "overflow: auto" (or presumably hidden - untested), the draggable will snap to targets even when they're not shown on the page - ie: they're outside the "visible" portion of the div. I'd expect that the snapping behaviour would only occur when interacting with visible elements.

Found in 1.8.21 (latest google CDN version at the moment) OS: Win7 x64 Browser: Chrome 21.0 (plus FF/IE/Opera - presumed universal)

To reproduce:

  • Load jsFiddle -
  • Drag div labelled "Drag me" down under the scrollable div
  • The draggable will snap onto invisible elements (hidden by the overflow rule)

For the sake of completeness, I've put together a temporary workaround for the issue - struggled deciphering the snapping code at this point, so it's just in a jsFiddle:

Change History (5)

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

Resolution: invalid
Status: newclosed

I'm not sure why you would think that. Elements with overflow: auto are still :visible, even though they're not in the viewport.

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

Resolution: invalid
Status: closedreopened

Actually, I see what you mean.

comment:3 Changed 10 years ago by Scott González


comment:4 Changed 10 years ago by mikesherov

Status: reopenedopen

comment:5 Changed 8 years ago by mikesherov

Milestone: 2.0.0none

This bug is a great example of why snap is being deprecated in 2.0. Alas, I suppose someone *could* fix this by constraining each snapElement to the dimensions of its scrollParent, which is more generic than the patch linked above.


I'm not going to work on it for now though, and it definitely won't be fixed in 2.0 unless you consider removal fixing.

Note: See TracTickets for help on using tickets.