diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
index 5668c909a..a44346e7c 100644
--- a/tests/unit/resizable/resizable.html
+++ b/tests/unit/resizable/resizable.html
@@ -69,6 +69,7 @@
diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
index 2b66fda3e..d68294845 100644
--- a/tests/unit/resizable/resizable_options.js
+++ b/tests/unit/resizable/resizable_options.js
@@ -375,6 +375,35 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1
equal( target.height(), 100, "compare maxHeight" );
});
+
+test( "custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () {
+ expect( 2 );
+
+ var handle = "#resizer1",
+ target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" ) }, containment: "parent" });
+
+ TestHelpers.resizable.drag( handle, 0, 70 );
+ equal( target.height(), 170, "compare height" );
+
+ TestHelpers.resizable.drag( handle, 0, -70 );
+ equal( target.height(), 100, "compare height" );
+});
+
+
+test( "custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function () {
+ expect( 2 );
+
+ var handle = "#resizer1",
+ target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" )[ 0 ] }, containment: "parent" });
+
+ TestHelpers.resizable.drag( handle, 0, 70 );
+ equal( target.height(), 170, "compare height" );
+
+ TestHelpers.resizable.drag( handle, 0, -70 );
+ equal( target.height(), 100, "compare height" );
+});
+
+
test("zIndex, applied to all handles", function() {
expect(8);
diff --git a/ui/resizable.js b/ui/resizable.js
index 88b9ee7ea..2df2413c7 100644
--- a/ui/resizable.js
+++ b/ui/resizable.js
@@ -160,7 +160,8 @@ $.widget("ui.resizable", $.ui.mouse, {
nw: ".ui-resizable-nw"
} );
- if (this.handles.constructor === String) {
+ this._handles = $();
+ if ( this.handles.constructor === String ) {
if ( this.handles === "all") {
this.handles = "n,e,s,w,se,sw,ne,nw";
@@ -198,6 +199,9 @@ $.widget("ui.resizable", $.ui.mouse, {
if (this.handles[i].constructor === String) {
this.handles[i] = this.element.children( this.handles[ i ] ).first().show();
+ } else if ( this.handles[ i ].jquery || this.handles[ i ].nodeType ) {
+ this.handles[ i ] = $( this.handles[ i ] );
+ this._on( this.handles[ i ], { "mousedown": that._mouseDown });
}
if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/^(textarea|input|select|button)$/i)) {
@@ -214,21 +218,17 @@ $.widget("ui.resizable", $.ui.mouse, {
target.css(padPos, padWrapper);
this._proportionallyResize();
-
}
- // TODO: What's that good for? There's not anything to be executed left
- if (!$(this.handles[i]).length) {
- continue;
- }
+ this._handles = this._handles.add( this.handles[ i ] );
}
};
// TODO: make renderAxis a prototype function
this._renderAxis(this.element);
- this._handles = $(".ui-resizable-handle", this.element)
- .disableSelection();
+ this._handles = this._handles.add( this.element.find( ".ui-resizable-handle" ) );
+ this._handles.disableSelection();
this._handles.mouseover(function() {
if (!that.resizing) {
@@ -262,7 +262,6 @@ $.widget("ui.resizable", $.ui.mouse, {
}
this._mouseInit();
-
},
_destroy: function() {