quiero ser capaz de crear una copia del elemento que quiero arrastrar. Estoy usando el ui estándar arrastrable y arrastrable. Sé sobre la opción de clon auxiliar. pero eso no crea una copia. el elemento arrastrado se revierte a la posición original.clon node en arrastre
Marcos,
Prueba este ejemplo:
$(document).ready(function(){
$(".objectDrag").draggable({helper:'clone'});
$("#garbageCollector").droppable({
accept: ".objectDrag",
drop: function(event,ui){
console.log("Item was Dropped");
$(this).append($(ui.draggable).clone());
}
});
});
Y el HTML se parece a esto
<div class="objectDrag"
style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
<div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>
Para volver a arrastrar el clon/copia, establezca el argumento withDataAndEvents-verdadera:
$(this).append($(ui.draggable).clone(*true*));
Como yo no soy capaz de comentar (aún) Voy a dejar esto como una respuesta por separado - en caso de que alguien, como yo, se encuentra esta pregunta: ¿
Para la pregunta de comentario
" Pero quiero que el elemento clonado/caído esté en la misma posición en que se cayó. ¿Conoces cómo puedo hacerlo"
que he encontrado la solución en diferentes SO pregunta, y la respuesta es cambiar esta línea:
$(this).append($(ui.draggable).clone());
a
$(this).append($(ui.helper).clone());
(cambio ui.draggable a ui.helper)
espero que ayude.
Scott, muchas gracias por este . Pero quiero que el elemento clonado/caído esté en la misma posición en que se soltó. ¿sabes cómo puedo hacerlo? Intenté agregar .css (ui.position). pero no funcionó – mark
Mark, mi primera conjetura hubiera sido usar el .css (ui.position), pero si lo has intentado ... Lo que podrías intentar es crear una copia temporal del objeto que se puede arrastrar en parada. Esto debería contener la posición relativa del objeto. Añádalo al contenedor en lugar del objeto en sí. Déjame saber – Scott
¡Excelente! Limpio y simple. – NLV