Resizable: containment plugin restricts resizing within container

Fixes #7018
Fixes #9107
Closes gh-1122

diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
index 8f1702a38abdf5beb0b1312c7e2dca8b45c4c523..8da189d966905444862203f856c1471da6035e02 100644 (file)
--- 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
index ba793ac67f8edec7a337990865163c2d5bbed14b..afdf1ff2512ef4dc6f4effdf632397a6876fc616 100644 (file)
--- 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,6 +839,7 @@ $.ui.plugin.add( "resizable", "containment", {
                        that.size.width = that.parentData.width - woset;
                        if ( pRatio ) {
                                that.size.height = that.size.width / that.aspectRatio;
+                               continueResize = false;
                        }
                }
 
@@ -836,8 +847,16 @@ $.ui.plugin.add( "resizable", "containment", {
                        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(){