Draggable: apply axis options to position instead of style. Fixes #7251 - Draggable: constrained axis option returns incorrect position.

Author: mikesherov

tests/unit/draggable/draggable_options.js

@@ -106,14 +106,28 @@ test( "{ axis: false }, default", function() {
 });
 
 test( "{ axis: 'x' }", function() {
-	expect( 2 );
-	var element = $( "#draggable2" ).draggable({ axis: "x" });
+	expect( 3 );
+	var element = $( "#draggable2" ).draggable({
+		axis: "x",
+		// TODO: remove the stop callback when all TestHelpers.draggable.testDrag bugs are fixed
+		stop: function( event, ui ) {
+			var expectedPosition = { left: ui.originalPosition.left + 50, top: ui.originalPosition.top };
+			deepEqual( ui.position, expectedPosition, "position dragged[50,0] for axis: x" );
+		}
+	});
 	TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 0, "axis: x" );
 });
 
 test( "{ axis: 'y' }", function() {
-	expect( 2 );
-	var element = $( "#draggable2" ).draggable({ axis: "y" });
+	expect( 3 );
+	var element = $( "#draggable2" ).draggable({
+		axis: "y",
+		// TODO: remove the stop callback when all TestHelpers.draggable.testDrag bugs are fixed
+		stop: function( event, ui ) {
+			var expectedPosition = { left: ui.originalPosition.left, top: ui.originalPosition.top + 50 };
+			deepEqual( ui.position, expectedPosition, "position dragged[0,50] for axis: y" );
+		}
+	});
 	TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 50, "axis: y" );
 });
 

ui/jquery.ui.draggable.js

@@ -221,12 +221,9 @@ $.widget("ui.draggable", $.ui.mouse, {
 			this.position = ui.position;
 		}
 
-		if(!this.options.axis || this.options.axis !== "y") {
-			this.helper[0].style.left = this.position.left+"px";
-		}
-		if(!this.options.axis || this.options.axis !== "x") {
-			this.helper[0].style.top = this.position.top+"px";
-		}
+		this.helper[ 0 ].style.left = this.position.left + "px";
+		this.helper[ 0 ].style.top = this.position.top + "px";
+
 		if($.ui.ddmanager) {
 			$.ui.ddmanager.drag(this, event);
 		}
@@ -554,6 +551,13 @@ $.widget("ui.draggable", $.ui.mouse, {
 				pageX = containment ? ((left - this.offset.click.left >= containment[0] || left - this.offset.click.left > containment[2]) ? left : ((left - this.offset.click.left >= containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
 			}
 
+			if ( o.axis === "y" ) {
+				pageX = this.originalPageX;
+			}
+
+			if ( o.axis === "x" ) {
+				pageY = this.originalPageY;
+			}
 		}
 
 		return {