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

代わりdetachdropでのイベントの彼のコメント使用cloneに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>

を達成として、あなたは dragstopイベント

EDIT

上の要素のクローンを作成することができます