Wie kann ich ein gezogenes Element in jqueryUI klonen

Question

Wie kann ich ein gezogenes Element klonen und das ursprüngliche Element an seinem ursprünglichen Platz bleiben lassen? Ich möchte das Wort "Element" in div unten geklont werden und dann möchte ich, dass der Klon die Möglichkeit hat, in die Box mit dem schwarzen Rahmen zu hängen, wenn er darüber fallen gelassen wird. Hier ist mein Code: -

$(window).load(function(){ 
 

 

 
$('.me').draggable({ 
 
       helper:"clone", 
 
       containment:"document" 
 
}); 
 

 
$('#a').droppable({ 
 
     greedy: true, 
 
     drop:function(event, ui) { 
 
      ui.draggable.detach().appendTo($(this)); 
 
     } 
 
}); 
 

 
});

#a{ 
 
    height: 100px; 
 
    width:100px; 
 
    border:2px solid black; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 

 

 

 

 

 
    
 
<span class="me">element</span> 
 

 

 

 

 
    <div id="a"></div> 
 
    
 

Ich schätze Ihre Hilfe wirklich.

Answer 1

Sie das Element auf dragstop Ereignis klonen

EDIT

Wie clone von Kevkong in seinem Kommentar Verwendung vorgeschlagen statt detach in drop Ereignis und einfach erreichen dieses

$(window).load(function(){ 
 

 

 
    $('.me').draggable({ 
 
        helper:"clone", 
 
        containment:"document" 
 
    }); 
 

 
    $('#a').droppable({ 
 
      greedy: true, 
 
      drop:function(event, ui) { 
 
       ui.draggable.clone().appendTo($(this)); 
 
       ui.helper.data('dropped', true); 
 
      } 
 
    }); 
 
    
 
    });

#a{ 
 
    height: 100px; 
 
    width:100px; 
 
    border:2px solid black; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
    
 
    
 
<span class="me">element</span> 
 
    
 
<div id="a"></div>