Ticket #6181 (closed bug: fixed)

Opened 4 years ago

Last modified 23 months ago

Draggable: issue with containment on position:fixed elements

Reported by: gethinw Owned by:
Priority: minor Milestone:
Component: ui.draggable Version: 1.8.5
Keywords: Cc:
Blocking: Blocked by:


If an element is position:fixed and made draggable with containment:'window' the containment isn't applied correctly when the page is scrolled.

See  http://jsfiddle.net/JVn7P/

Change History

comment:1 Changed 4 years ago by jfremy

The following fix did it for me (I did not test thoroughly). In _setContainment, use the following code:

if(o.containment == 'document' || o.containment == 'window') this.containment = [
	o.containment == 'document' ? 0 : $(window).scrollLeft() - this.offset.relative.left - this.offset.parent.left,
	o.containment == 'document' ? 0 : $(window).scrollTop() - this.offset.relative.top - this.offset.parent.top,
	o.containment == 'document' ? 0 : $(window).scrollLeft() + $(o.containment == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left,
	o.containment == 'document' ? 0 : $(window).scrollTop() + ($(o.containment == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top

When containment is "window", use scrollTop and scrollLeft to shift the containment window accordingly.

The problem also manifests itself with position:absolute. If you take the fiddle sample and switch from fixed to absolute, then if you move the block down, then scroll and then try to move the block again, it will jump up.

comment:3 Changed 4 years ago by scott.gonzalez

  • Summary changed from issue with draggable containment on position:fixed elements to Draggable: issue with containment on position:fixed elements

comment:4 Changed 4 years ago by Jean-Francois Remy

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

Draggable: Handle scrolled windows. Fixes #6181 - Draggable: issue with containment on position:fixed elements.

Changeset: e01664a3820c185636a3fe7099e93e68091d24fd

comment:5 Changed 23 months ago by scott.gonzalez

  • Milestone TBD deleted

Milestone TBD deleted

Note: See TracTickets for help on using tickets.