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 a88d645)
jquery · Apr 17, 2013 · 48b48a8 · 48b48a8
1 parent 9711c54
commit 48b48a8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 7 deletions.
diff --git 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 = $( "<div>" ).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
@@ -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 )
 			)
 		};