Resizable: Modified to allow jquery objects as handles

Custom handlers did not work as jquery objects (outside the resizable element)

Fixes #9658

Author: patrixd

tests/unit/resizable/resizable.html

@@ -69,6 +69,7 @@
 
 <div id="container">
 	<div id="resizable1">I'm a resizable.</div>
+	<div id="resizer1" class="ui-resizable-handle ui-resizable-s"></div>
 </div>
 
 <div id="container2">

tests/unit/resizable/resizable_options.js

@@ -374,6 +374,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);
 

ui/resizable.js

@@ -165,7 +165,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";
@@ -195,14 +196,21 @@ $.widget("ui.resizable", $.ui.mouse, {
 
 		this._renderAxis = function(target) {
 
-			var i, axis, padPos, padWrapper;
+			var i, axis, padPos, padWrapper, mouseDownHandlers = {
+				mousedown: function( event ) {
+					return that._mouseDown( event );
+				}
+			};
 
 			target = target || this.element;
 
 			for (i in this.handles) {
 
 				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 ], mouseDownHandlers );
 				}
 
 				if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/^(textarea|input|select|button)$/i)) {
@@ -219,11 +227,12 @@ $.widget("ui.resizable", $.ui.mouse, {
 					target.css(padPos, padWrapper);
 
 					this._proportionallyResize();
-
 				}
 
+				this._handles = this._handles.add( this.handles[ i ] );
+
 				// TODO: What's that good for? There's not anything to be executed left
-				if (!$(this.handles[i]).length) {
+				if ( !$( this.handles[ i ] ).length ) {
 					continue;
 				}
 			}
@@ -232,8 +241,8 @@ $.widget("ui.resizable", $.ui.mouse, {
 		// TODO: make renderAxis a prototype function
 		this._renderAxis(this.element);
 
-		this._handles = $(".ui-resizable-handle", this.element)
-			.disableSelection();
+		this._handles = this._handles.add( $( ".ui-resizable-handle", this.element ) );
+		this._handles.disableSelection();
 
 		this._handles.mouseover(function() {
 			if (!that.resizing) {
@@ -267,7 +276,6 @@ $.widget("ui.resizable", $.ui.mouse, {
 		}
 
 		this._mouseInit();
-
 	},
 
 	_destroy: function() {