JQuery with droppable draggable and resizable does not work as expected

Question

JQueryUI Draggable inside resizable droppable does not work. The idea is to be able to drag and drop items that are dragged and divided into resizable divs for dropped items.

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

Instructions for reproducing the problem:

• Drag "drag me" to "the place you want to reset"
  • Try resizing
  • Try dragging and dropping the item inside the "place to delete"
  • Try changing the size of the dragged item - it does not work as expected

Please find the code below where #dragme and #droppable refer to the corresponding div. Any ideal, 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

, <div class="ui-resizable-handle">. drop :

x = ui.helper.clone();

.ui-resizable-handle, , . , :

x.resizable();

-, .ui-resizeable-handle; .ui-resizeable-handle, , , - z-index: () .ui-resiable-handle . <div>, :

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

:

$("#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();
    }
});

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

x.resizable('destroy') , x , .

, , .

Answer 2

, , , , - .

: -, , , div, .

. , "" droppable ( ) .data(), . droppable drop " javascript" , .

, :

" IQ, Ax".

, :

$("#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 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*/
});

}
});

,

. , o " " ;-).

Answer 3

As soon as you attach ".resizable ()", the element first destroys the event and then attaches. it will work. // $ (ele) is an object.

    $(ele).resizable().resizable("destroy");
        $(ele).draggable();
        $(ele).resizable({
          animate: 'true',
          ghost: 'true',
          handles: 'ne, nw, se, sw',
    });