Draggable: Manage ui-draggable-handle correctly in nested instances

diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js
index beab67f19abcf02d7ac04b173838f1743d27808e..dd526e5ec85953d8367ee0228bf69e644de4f31e 100644 (file)
--- a/tests/unit/draggable/draggable_core.js
+++ b/tests/unit/draggable/draggable_core.js
@@ -291,4 +291,17 @@ test( "ui-draggable-handle assigned to appropriate element", function() {
        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 = $( "<div><div></div></div>" ).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 cd87ad2fcefc03fc4807e4b04c141e7ad3007553..5f29f4cf8b3e8c17b64f505d30edca36186da5d5 100644 (file)
--- 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,16 +315,13 @@ $.widget("ui.draggable", $.ui.mouse, {
        },
 
        _setHandleClassName: function() {
-               var handle =  this.options.handle ?
+               this.handleElement = this.options.handle ?
                        this.element.find( this.options.handle ) : this.element;
-               this._removeHandleClassName();
-               handle.addClass( "ui-draggable-handle" );
+               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) {