如何克隆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事件的元素

编辑

正如在他的评论中使用clone代替detach在drop事件所建议的Kevkong，只是实现这个

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