如何在jqueryUI中克隆拖动的元素

Question

我如何克隆一个拖动的元素并使原始元素保留在其原始位置。 我希望克隆下面div中的“ element”一词，然后我希望克隆具有将黑色边框（如果将其放在上面）附加到框中的功能。 这是我的代码：

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

非常感谢您的帮助。

Answer 1

您可以在dragstop事件中克隆元素

编辑

正如在他的评论中使用建议的Kevkong clone ，而不是detach的drop事件，简单地实现这一目标

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