Resizable: containment plugin restricts resizing within container

Fixes #7018 Fixes #9107 Closes gh-1122
jquery · Nov 1, 2013 · 20f064662a016eaa6bc580aed012022c63f675aa · scottgonzalez · Jul 9, 2014 · scottgonzalez
1 parent bae1a25
commit 20f064662a016eaa6bc580aed012022c63f675aa
Unified Split

Showing with 61 additions and 11 deletions.

+31 −0 tests/unit/resizable/resizable_options.js

+30 −11 ui/jquery.ui.resizable.js
diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
@@ -123,6 +123,37 @@ test("aspectRatio: 'preserve' (ne)", function() {
 	equal( target.height(), 70, "compare minHeight");
 });

+test( "aspectRatio: Resizing can move objects", function() {
+	expect( 7 );
+
+	// http://bugs.jqueryui.com/ticket/7018 - Resizing can move objects
+	var handleW = ".ui-resizable-w",
+		handleNW = ".ui-resizable-nw",
+		target = $( "#resizable1" ).resizable({
+			aspectRatio: true,
+			handles: "all",
+			containment: "parent"
+		});
+
+	$( "#container" ).css({ width: 200, height: 300 });
+	$( "#resizable1" ).css({ width: 100, height: 100, left: 75, top: 200 });
+
+	TestHelpers.resizable.drag( handleW, -20 );
+	equal( target.width(), 100, "compare width - no size change" );
+	equal( target.height(), 100, "compare height - no size change" );
+	equal( target.position().left, 75, "compare left - no movement" );
+
+	// http://bugs.jqueryui.com/ticket/9107 - aspectRatio and containment not handled correctly
+	$( "#container" ).css({ width: 200, height: 300, position: "absolute", left: 100, top: 100 });
+	$( "#resizable1" ).css({ width: 100, height: 100, left: 0, top: 0 });
+
+	TestHelpers.resizable.drag( handleNW, -20, -20 );
+	equal( target.width(), 100, "compare width - no size change" );
+	equal( target.height(), 100, "compare height - no size change" );
+	equal( target.position().left, 0, "compare left - no movement" );
+	equal( target.position().top, 0, "compare top - no movement" );
+});
+
 test( "containment", function() {
 	expect( 6 );
 	var element = $( "#resizable1" ).resizable({
diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
@@ -341,14 +341,19 @@ $.widget("ui.resizable", $.ui.mouse, {
 			el = this.helper, props = {},
 			smp = this.originalMousePosition,
 			a = this.axis,
-			prevTop = this.position.top,
-			prevLeft = this.position.left,
-			prevWidth = this.size.width,
-			prevHeight = this.size.height,
 			dx = (event.pageX-smp.left)||0,
 			dy = (event.pageY-smp.top)||0,
 			trigger = this._change[a];

+		this.prevPosition = {
+			top: this.position.top,
+			left: this.position.left
+		};
+		this.prevSize = {
+			width: this.size.width,
+			height: this.size.height
+		};
+
 		if (!trigger) {
 			return false;
 		}
@@ -369,16 +374,16 @@ $.widget("ui.resizable", $.ui.mouse, {
 		// plugins callbacks need to be called first
 		this._propagate("resize", event);

-		if (this.position.top !== prevTop) {
+		if ( this.position.top !== this.prevPosition.top ) {
 			props.top = this.position.top + "px";
 		}
-		if (this.position.left !== prevLeft) {
+		if ( this.position.left !== this.prevPosition.left ) {
 			props.left = this.position.left + "px";
 		}
-		if (this.size.width !== prevWidth) {
+		if ( this.size.width !== this.prevSize.width ) {
 			props.width = this.size.width + "px";
 		}
-		if (this.size.height !== prevHeight) {
+		if ( this.size.height !== this.prevSize.height ) {
 			props.height = this.size.height + "px";
 		}
 		el.css(props);
@@ -662,7 +667,9 @@ $.widget("ui.resizable", $.ui.mouse, {
 			position: this.position,
 			size: this.size,
 			originalSize: this.originalSize,
-			originalPosition: this.originalPosition
+			originalPosition: this.originalPosition,
+			prevSize: this.prevSize,
+			prevPosition: this.prevPosition
 		};
 	}

@@ -779,7 +786,7 @@ $.ui.plugin.add( "resizable", "containment", {
 		}
 	},

-	resize: function( event ) {
+	resize: function( event, ui ) {
 		var woset, hoset, isParent, isOffsetRelative,
 			that = $( this ).resizable( "instance" ),
 			o = that.options,
@@ -790,7 +797,8 @@ $.ui.plugin.add( "resizable", "containment", {
 				top: 0,
 				left: 0
 			},
-			ce = that.containerElement;
+			ce = that.containerElement,
+			continueResize = true;

 		if ( ce[ 0 ] !== document && ( /static/ ).test( ce.css( "position" ) ) ) {
 			cop = co;
@@ -800,6 +808,7 @@ $.ui.plugin.add( "resizable", "containment", {
 			that.size.width = that.size.width + ( that._helper ? ( that.position.left - co.left ) : ( that.position.left - cop.left ) );
 			if ( pRatio ) {
 				that.size.height = that.size.width / that.aspectRatio;
+				continueResize = false;
 			}
 			that.position.left = o.helper ? co.left : 0;
 		}
@@ -808,6 +817,7 @@ $.ui.plugin.add( "resizable", "containment", {
 			that.size.height = that.size.height + ( that._helper ? ( that.position.top - co.top ) : that.position.top );
 			if ( pRatio ) {
 				that.size.width = that.size.height * that.aspectRatio;
+				continueResize = false;
 			}
 			that.position.top = that._helper ? co.top : 0;
 		}
@@ -829,15 +839,24 @@ $.ui.plugin.add( "resizable", "containment", {
 			that.size.width = that.parentData.width - woset;
 			if ( pRatio ) {
 				that.size.height = that.size.width / that.aspectRatio;
+				continueResize = false;
 			}
 		}

 		if ( hoset + that.size.height >= that.parentData.height ) {
 			that.size.height = that.parentData.height - hoset;
 			if ( pRatio ) {
 				that.size.width = that.size.height * that.aspectRatio;
+				continueResize = false;
 			}
 		}
+
+		if ( !continueResize ){
+			that.position.left = ui.prevPosition.left;
+			that.position.top = ui.prevPosition.top;
+			that.size.width = ui.prevSize.width;
+			that.size.height = ui.prevSize.height;
+		}
 	},

 	stop: function(){