Jquery con arrastrar arrastrable y redimensionable no funciona como se esperaba

Question

JQueryUI Arrastrable dentro Droppable con redimensionable no funciona. La idea es poder arrastrar elementos que se arrastran y sueltan a div con el cambio de tamaño para los elementos descartados.

código de trabajo: http://jsfiddle.net/lukaszjg/GvDLh/

instrucciones para reproducir el problema:

1. Drag "Drag Me" al "lugar para dejar"
   1. Intenta cambiar el tamaño
   2. intenta arrastrar elemento arrastrado en el interior "colocar para soltar"
   3. Intentar cambiar el tamaño de nuevo elemento arrastrado - no funciona como se esperaba

Por favor, encontrar el código debajo de donde #dragme y #droppable se refieren a los correspondientes divs. ¿Alguna idea de cómo solucionarlo?

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

Cuando se enlaza un widget de tamaño variable a un elemento, que se sumará varios elementos <div class="ui-resizable-handle">. Luego, dentro de su drop de devolución de llamada, usted tiene esto:

x = ui.helper.clone(); 

Eso será clonar los .ui-resizable-handle elementos, así como los elementos que desea clonar. Y luego un par de líneas posteriores, que tienen:

x.resizable(); 

Al parecer, esa llamada se confunde por la presencia de los elementos de .ui-resizeable-handle; terminará agregando un conjunto adicional de elementos .ui-resizeable-handle pero no funcionarán probablemente debido a problemas con el índice Z: los originales (probablemente) estarán por encima de ellos y bloqueando todos los eventos desde los elementos .ui-resiable-handle que tienen controladores de eventos unido a ellos. Si quita manualmente el infractor <div> s antes de hacer el clon de tamaño variable:

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

Entonces funciona:

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

violín Actualizado: http://jsfiddle.net/ambiguous/xZECa/

Sólo llamaba x.resizable('destroy') para limpiarlo no lo hace funciona porque x no se puede cambiar de tamaño, así que no pasa nada.

Debería haber una forma mejor de hacer que esto funcione pero aún no sé lo que es.

Answer 2

Tuve algunos problemas experimentando su solución pero me pusieron en el camino así que describiré mi problema y solución si esto ayuda a alguien más.

Mi caso: una planificación con divs desplegables que representan a cada empleado, y divs que se pueden arrastrar y que representan las tareas.

Problema: De todos modos, solo que mis "tareas" ya son hijos del droppable (provienen de una base de datos) y tienen muchas cosas de .data(), por lo que la clonación fue un desastre. El evento drop drop drop arroja un error "no se puede convertir el argumento javascript" y arruina mi aplicación bloqueando cualquier arrastre adicional.

Después de ver su solución y dejar de reproducirlo en mi caso yo regresamos a lo básico:

"Si usted tiene un coeficiente intelectual de leñador usar un hacha".

Así que aquí es el material:

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

} 
}); 

Esperamos que esto pueda ayudar a

Nota: No muy seguro de mi nivel de Inglés por lo que en caso de errores o faltas de ortografía por favor refiérase a la "vuelta a lo básico" sección y perdóname ;-).

Answer 3

Una vez que adjuntar ".resizable()" con el primer elemento de destruir el evento y luego adjuntar. funcionará. // $ (ele) es un objeto.

 


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