Resizable: Made handles work with complex markup. Fixes #8756 - Resizable: Complex markup for handles.

Author: MatteS75

tests/unit/resizable/resizable_core.js

@@ -129,4 +129,24 @@ test("nw", function() {
 	equal( target.height(), 100, "compare height" );
 });
 
+test("handle with complex markup (#8756)", function() {
+	expect(2);
+
+	$('#resizable1')
+		.append(
+			$('<div>')
+				.addClass("ui-resizable-handle")
+				.addClass("ui-resizable-w")
+				.append($('<div>'))
+		);
+
+	var handle = '.ui-resizable-w div', target = $('#resizable1').resizable({ handles: 'all' });
+	
+	TestHelpers.resizable.drag(handle, -50);
+	equal( target.width(), 150, "compare width" );
+
+	TestHelpers.resizable.drag(handle, 50);
+	equal( target.width(), 100, "compare width" );
+});
+
 })(jQuery);

ui/jquery.ui.resizable.js

@@ -231,14 +231,15 @@ $.widget("ui.resizable", $.ui.mouse, {
 	},
 
 	_mouseCapture: function(event) {
-		var handle = false;
+		var capture = false;
 		for (var i in this.handles) {
-			if ($(this.handles[i])[0] == event.target) {
-				handle = true;
+			var handle = $(this.handles[i])[0];
+			if (handle == event.target || $.contains(handle, event.target)) {
+				capture = true;
 			}
 		}
 
-		return !this.options.disabled && handle;
+		return !this.options.disabled && capture;
 	},
 
 	_mouseStart: function(event) {