nó clone de arrasto

Question

eu quero ser capaz de criar uma cópia do elemento que eu quero arrastar. im usando o draggable ui padrão e droppable. eu sei sobre a opção clone ajudante. mas isso não cria uma cópia. o item arrastado fica revertido para a posição original.

Answer 1

Mark,

Tente este exemplo:

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

    });

E os olhares HTML como este

        <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>

Answer 2

Desde que eu não sou capaz de comentário (até o momento) eu vou deixar isso como uma resposta em separado - no caso de alguém, como eu, vai encontrar esta pergunta:

Para a pergunta de comentário

"Mas eu quero o clonado elemento para estar na mesma posição que foi abandonado / deixado cair. Você sabe como eu posso fazer isso?"

Eu encontrei solução em diferentes SO pergunta, ea resposta é mudar esta linha:

   $(this).append($(ui.draggable).clone());

para

   $(this).append($(ui.helper).clone());

(mudança ui.draggable para ui.helper)

Hope isso ajuda.

Answer 3

Para re-arrastar o clone / copiar, defina o argumento withDataAndEvents a true :

$(this).append($(ui.draggable).clone(*true*));