clone node on drag

Question

Voglio essere in grado di creare una copia dell'elemento che voglio trascinare. sto usando lo standard ui draggable e droppable. Conosco l'opzione clone helper. ma ciò non crea una copia. l'oggetto trascinato viene ripristinato nella posizione originale.

Answer 1

Mark,

Prova questo esempio:

 $(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 l'Html assomiglia a questo

 <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

Per ri-trascinare il clone/copia, impostare l'argomento withDataAndEvents-vero:

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

Answer 3

Dal momento che non sono in grado di commentare (ancora) Lascio questo come una risposta separata - nel caso in cui qualcuno, come me, troverò questa domanda:

Per la questione dal commento

" Ma voglio che l'elemento clonato/lasciato si trovi nella stessa posizione in cui è stato rilasciato. ? Sapete come posso farlo"

ho trovato soluzione in diversi SO domanda, e la risposta è di cambiare questa linea:

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

a

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

(cambiamento ui.draggable a ui.helper)

speriamo vi sia utile.