library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resizable: containment plugin restricts resizing within container

Browse Source 
Fixes #7018
Fixes #9107
Closes gh-1122
This commit is contained in:
Jyoti Deka 2013-11-01 07:06:47 -04:00 committed by Mike Sherov
parent bae1a25b14
commit 20f064662a
2 changed files with 61 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
tests/unit/resizable/resizable_options.js
View File

@ -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({

41
ui/jquery.ui.resizable.js vendored
View File

@ -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(){