From 48b48a886576c427140e2c5549cff942dc6c79fa Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Tue, 2 Apr 2013 09:08:17 -0400 Subject: [PATCH] Draggable: Stop erroneously overriding scroll offsets for root nodes. Fixes #6258 - Draggable: not following mouse when scrolled and using overflow-y: scroll. (cherry picked from commit a88d64514001867b908776e6bfcfac7f1011970d) --- tests/unit/draggable/draggable_core.js | 35 ++++++++++++++++++++++++++ ui/jquery.ui.draggable.js | 13 +++++----- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js index f22d483a6..0d693e4ff 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/draggable_core.js @@ -94,4 +94,39 @@ test( "#8269: Removing draggable element on drop", function() { }); }); +test( "#6258: not following mouse when scrolled and using overflow-y: scroll", function() { + expect( 2 ); + + var element = $( "#draggable1" ).draggable({ + stop: function( event, ui ) { + equal( ui.position.left, 1, "left position is correct despite overflow on HTML" ); + equal( ui.position.top, 1, "top position is correct despite overflow on HTML" ); + $( "html" ) + .css( "overflow-y", oldOverflowY ) + .css( "overflow-x", oldOverflowX ) + .scrollTop( 0 ) + .scrollLeft( 0 ); + } + }), + contentToForceScroll = $( "
" ).css({ + height: "10000px", + width: "10000px" + }), + oldOverflowY = $( "html" ).css( "overflow-y" ), + oldOverflowX = $( "html" ).css( "overflow-x" ); + + contentToForceScroll.appendTo( "#qunit-fixture" ); + $( "html" ) + .css( "overflow-y", "scroll" ) + .css( "overflow-x", "scroll" ) + .scrollTop( 300 ) + .scrollLeft( 300 ); + + element.simulate( "drag", { + dx: 1, + dy: 1, + moves: 1 + }); +}); + })( jQuery ); diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index fa8508354..c07f79974 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -440,7 +440,7 @@ $.widget("ui.draggable", $.ui.mouse, { } var mod = d === "absolute" ? 1 : -1, - scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); + scroll = this.cssPosition === "absolute" && !( this.scrollParent[ 0 ] !== document && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ? this.offsetParent : this.scrollParent; //Cache the scroll if (!this.offset.scroll) { @@ -452,13 +452,13 @@ $.widget("ui.draggable", $.ui.mouse, { pos.top + // The absolute mouse position this.offset.relative.top * mod + // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.top * mod - // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) * mod) + ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : this.offset.scroll.top ) * mod ) ), left: ( pos.left + // The absolute mouse position this.offset.relative.left * mod + // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.left * mod - // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.offset.scroll.left ) * mod) + ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : this.offset.scroll.left ) * mod ) ) }; @@ -468,8 +468,7 @@ $.widget("ui.draggable", $.ui.mouse, { var containment, co, top, left, o = this.options, - scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, - scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName), + scroll = this.cssPosition === "absolute" && !( this.scrollParent[ 0 ] !== document && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ? this.offsetParent : this.scrollParent, pageX = event.pageX, pageY = event.pageY; @@ -530,14 +529,14 @@ $.widget("ui.draggable", $.ui.mouse, { this.offset.click.top - // Click offset (relative to the element) this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.top + // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )) + ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : this.offset.scroll.top ) ), left: ( pageX - // The absolute mouse position this.offset.click.left - // Click offset (relative to the element) this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.left + // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.offset.scroll.left )) + ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : this.offset.scroll.left ) ) }; -- 2.39.5