How can i clone a dragged element in jqueryUI

Question

How can i clone a dragged element and make the original element stay in its original place. I want the word "element" in div below to be cloned and then i want the clone to have the ability to append in the box with the black border if it is dropped over it. Here is my 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> 

I really appreciate your help.

Answer 1

You can clone the element on dragstop event

EDIT

As suggested by Kevkong in his comment use clone instead of detach in drop event and simply achieve this

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