Jquery with droppable draggable and resizable is not working as expected

Question

JQueryUI Draggable inside Droppable with resizable doesn't work. Idea is to be able drag elements which are dragged and dropped to div with resize for dropped elements.

Working code: http://jsfiddle.net/lukaszjg/GvDLh/

Instructions to reproduce problem:

1. Drag "drag me" to the "place to drop"
   1. Try resize
   2. Try to drag dragged element inside "place to drop"
   3. Try resize again dragged element - is not working as expected

Please find code below where #dragme and #droppable refer to corresponding divs. Any ide how to fix it ?

$("#dragme").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'

});

var x = null;
$("#droppable").droppable({
drop: function(e, ui) {

x = ui.helper.clone();

x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});

x.resizable();
x.appendTo('#droppable');
ui.helper.remove();
}
});

Answer 1

When you bind a resizable widget to an element, it will add several <div class="ui-resizable-handle"> elements. Then, inside your drop callback, you have this:

x = ui.helper.clone();

That will clone the .ui-resizable-handle elements as well as the elements that you want to clone. And then a couple lines later, you have:

x.resizable();

Apparently that call gets confused by the presence of the .ui-resizeable-handle elements; it will end up adding an extra set of .ui-resizeable-handle elements but they won't work probably because of z-index issues: the originals will (probably) be above them and blocking all the events from getting down to the .ui-resiable-handle elements that have event handlers attached to them. If you manually remove the offending <div>s before make the clone resizable:

x.find('.ui-resizable-handle').remove();
x.resizable();

Then it works:

$("#droppable").droppable({
    drop: function(e, ui) {
        x = ui.helper.clone();
        x.draggable({
            helper: 'original',
            containment: '#droppable',
            tolerance: 'fit'
        });
        x.find('.ui-resizable-handle').remove();
        x.resizable();
        x.appendTo('#droppable');
        ui.helper.remove();
    }
});

Updated fiddle: http://jsfiddle.net/ambiguous/xZECa/

Just calling x.resizable('destroy') to clean it up doesn't work because x isn't resizable so nothing happens.

There should be a better way to make this work but I don't know what it is yet.

Answer 2

I had some troubles experimenting your solution but you put me on the way so i'll describe my problem and solution if this helps someone else.

My case: A planning with droppable divs representing each employee, and draggable, resizable divs representing tasks.

Problem: Quite the same, only that my "tasks" are already children of the droppable (comes from a database) and have a lot of .data() stuff so cloning was a mess. The droppable drop event throw an error "can't convert javascript argument" and ruins my app blocking any further drag.

After seeing your solution and fail to reproduce it in my case i went back to basics:

"If you got a lumberjack IQ use an Ax".

So here's the stuff:

$("#dragme").draggable({
helper: 'original', //Needed in my case
cursor: 'move',
tolerance: 'fit',

start: function(event,ui){
$(this).resizable( "destroy" );/* The resizable generates troubles to the droppable?
Well let's remove the problem...
*/
} 

}).resizable({
/*All my functions to apply to the task when resized*/

});// I'm creating the resizable immediately because needed to attribute more or less time to the task 


$("#droppable").droppable({
drop: function(e, ui) {
/*All my drop functions to manage the task*/

//creating the resizable again PROBLEM SOLVED
$(ui.draggable).resizable({
/*All my functions to apply to the task when resized*/
});

}
});

Hope this can help

Note: Not very sure of my English level so in case of mistakes o misspelling please refer to the "Back to basics" section and forgive me ;-).