diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js index 7df0969b1a5..dd526e5ec85 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/draggable_core.js @@ -274,17 +274,34 @@ asyncTest( "#4261: active element should blur when mousing down on a draggable", }); test( "ui-draggable-handle assigned to appropriate element", function() { - expect( 4 ); + expect( 5 ); - var element = $( "

" ).appendTo( "#qunit-fixture" ).draggable(); + var p = $( "

" ).appendTo( "#qunit-fixture" ), + element = $( "

" ).appendTo( "#qunit-fixture" ).draggable(); ok( element.hasClass( "ui-draggable-handle" ), "handle is element by default" ); element.draggable( "option", "handle", "p" ); ok( !element.hasClass( "ui-draggable-handle" ), "removed from element" ); ok( element.find( "p" ).hasClass( "ui-draggable-handle" ), "added to handle" ); + ok( !p.hasClass( "ui-draggable-handle" ), + "ensure handle class name is constrained within the draggble (#10212)" ); + element.draggable( "destroy" ); ok( !element.find( "p" ).hasClass( "ui-draggable-handle" ), "removed in destroy()" ); }); +test( "ui-draggable-handle managed correctly in nested draggables", function() { + expect( 4 ); + var parent = $( "
" ).draggable().appendTo( "#qunit-fixture" ), + child = parent.find( "div" ).draggable(); + + ok( parent.hasClass( "ui-draggable-handle" ), "parent has class name on init" ); + ok( child.hasClass( "ui-draggable-handle" ), "child has class name on init" ); + + parent.draggable( "destroy" ); + ok( !parent.hasClass( "ui-draggable-handle" ), "parent loses class name on destroy" ); + ok( child.hasClass( "ui-draggable-handle" ), "child retains class name on destroy" ); +}); + })( jQuery ); diff --git a/ui/draggable.js b/ui/draggable.js index c27fc8733e7..5f29f4cf8b3 100644 --- a/ui/draggable.js +++ b/ui/draggable.js @@ -78,6 +78,7 @@ $.widget("ui.draggable", $.ui.mouse, { _setOption: function( key, value ) { this._super( key, value ); if ( key === "handle" ) { + this._removeHandleClassName(); this._setHandleClassName(); } }, @@ -314,14 +315,13 @@ $.widget("ui.draggable", $.ui.mouse, { }, _setHandleClassName: function() { - this._removeHandleClassName(); - $( this.options.handle || this.element ).addClass( "ui-draggable-handle" ); + this.handleElement = this.options.handle ? + this.element.find( this.options.handle ) : this.element; + this.handleElement.addClass( "ui-draggable-handle" ); }, _removeHandleClassName: function() { - this.element.find( ".ui-draggable-handle" ) - .addBack() - .removeClass( "ui-draggable-handle" ); + this.handleElement.removeClass( "ui-draggable-handle" ); }, _createHelper: function(event) {