Draggable: made handles work with complex markup. Fixes #8757 - Draggable: Resizable handle with inner element does not work, when its also draggable

Author: MatteS75

tests/unit/draggable/draggable.html

@@ -16,6 +16,7 @@
 			"ui/jquery.ui.core.js",
 			"ui/jquery.ui.widget.js",
 			"ui/jquery.ui.mouse.js",
+			"ui/jquery.ui.resizable.js",
 			"ui/jquery.ui.draggable.js"
 		]
 	});

tests/unit/draggable/draggable_core.js

@@ -44,4 +44,33 @@ test("No options, absolute", function() {
 	TestHelpers.draggable.shouldMove(el);
 });
 
+test("resizable handle with complex markup (#8756 / #8757)", function() {
+	expect( 2 );
+
+	$('#draggable1')
+		.append(
+			$('<div>')
+				.addClass("ui-resizable-handle")
+				.addClass("ui-resizable-w")
+				.append($('<div>'))
+		);
+
+	var handle = '.ui-resizable-w div',
+		target = $('#draggable1').draggable().resizable({ handles: 'all' }),
+		drag = function(el, dx) {
+			$(el)
+				.simulate("mouseover")
+				.simulate("drag", {
+					dx: dx || 0,
+					speed: 'sync'
+				});
+		};
+
+	drag(handle, -50);
+	equal( target.width(), 250, "compare width" );
+
+	drag(handle, 50);
+	equal( target.width(), 200, "compare width" );
+});
+
 })(jQuery);

ui/jquery.ui.draggable.js

@@ -70,7 +70,7 @@ $.widget("ui.draggable", $.ui.mouse, {
 		var o = this.options;
 
 		// among others, prevent a drag on a resizable-handle
-		if (this.helper || o.disabled || $(event.target).is('.ui-resizable-handle')) {
+		if (this.helper || o.disabled || $(event.target).closest('.ui-resizable-handle').length > 0) {
 			return false;
 		}