Al clonar un objeto que se puede arrastrar en la interfaz de usuario de jQuery, ¿cómo se pueden transferir los datos y eventos al nuevo elemento?

Question

Tengo un elemento arrastrable con el conjunto helper: 'clone', pero cuando clona el elemento, ninguno de los data() ni los eventos son persistentes en el nuevo elemento.

He intentado varias formas de volver a conectar el data(), pero parece que no puedo seleccionar tanto el nuevo elemento como el anterior en la misma declaración.

Por ejemplo, puedo seleccionar el elemento inicial en el stop() evento se pueda arrastrar:

$blah.draggable({ 
    helper: 'clone', 
    stop: function(ev, ui) { 
     var oldData = $(ev.target).data('blah'); 
    } 
}); 

y también puedo conseguir el nuevo elemento en el lanzables drop() evento:

$blah.droppable({ 
    drop : function(ev, ui) { 
     var $newElement = ui.draggable; 
    } 
}); 

pero puedo No encuentre una manera de obtener ambos en el mismo evento.

Lo que me gustaría hacer es de alguna manera la transferencia de los datos, por ejemplo:

$newElement.data('blah', $oldElement.data('blah')); 

o poner a los datos persistentes, como se hace con $blah.clone(true);

Answer 1

no he trabajado muy intensamente con droppable, pero ¿no podrías hacer algo como esto?

$(".draggable").draggable({ 
    helper: 'clone' 
}); 

$("#droppable").droppable({ 
    drop: function(ev, ui) { 
     $(this).append(ui.draggable.clone(true)); 
    } 
}); 

parece funcionar a menos que haya algo que me falta:

http://jsfiddle.net/hasrq/

Answer 2

Resulta que el problema era clasificable, no arrastrarlos/lanzables (que estaba adjunto se puede ordenar más adelante, pero pensó que no era Parte del problema aquí, así que lo dejé fuera de la pregunta original).

Terminé usando una especie de combinación de solución de @ kingjiv anteriormente, junto con un no-la-mayor truco pero al menos parece estar funcionando:

$blah.sortable({ 
    receive: function(ev, ui) { 
     // setting a global variable here 
     MyGlobals.cloneCache = ui.item.clone(true); 
    }, 
    stop: function(ev, ui) { 
     $(ui.item).replaceWith(MyGlobals.cloneCache); 
    } 
}); 

La idea es que primero clon el elemento original en el evento , guarde este en una variable y luego reemplace el elemento con el del evento stop().

Tipo de feo, pero al menos está funcionando.

Answer 3

Para obtener acceso a los datos del elemento original en drop puede usar ui.draggable.context. En el siguiente ejemplo, el contexto se refiere al elemento arrastrado original y usted tiene acceso a todo su contenido. Arrastrable se refiere al nuevo elemento que se está descartando.

$("#droppable").droppable({ 
    drop: function(ev, ui) {   
     console.log(ui); 
     console.log(ui.draggable.context); 
     console.log($(ui.draggable.context).data('pic')); 
    } 
}); 

Answer 4

ui.item se refiere al elemento arrastrado. Cuando se clona el elemento arrastrado, no hay una forma integrada de acceder al elemento de destino desde la función receive. Sin embargo, hay una manera poco hacky cómo hacerlo:

$blah.sortable({ 
    receive: function (ev, ui) { 
     var $target = $(this).data().sortable.currentItem; 
     var $source = $(ui.sender); 
     // now you can copy data from source to target 
     $target.data('data-item', $source.data('data-item')); 
    } 
});