javascript - 我如何在 jqueryUI 中克隆一个拖动的元素

Question

我怎样才能克隆一个拖动的元素并使原始元素留在原来的位置。我希望克隆下面的 div 中的“元素”一词，然后我希望克隆能够在将其拖放到带有黑色边框的框中时追加它。这是我的代码:-

$(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 在他的评论中所建议的那样，在 drop 事件中使用 clone 而不是 detach 并简单地实现这一点

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