克隆可拖動元素jQuery UI

Question

我有一個可拖動元素的頁面，我想放入頁面的可拖動部分。但是，當我點擊可拖動的div時，我實際上想要生成一個克隆並將其拖入可丟棄的環境中（將原始文件保留在後面）。實質上，我試圖在左側的工具箱中創建一系列預製件。當我點擊它們將其拖入繪圖中時，我只想生成該類型div的克隆。這是可能的JavaScript？

Answer 1

是的，它是可能的。這裏有一個例子

HTML

<div class="draggable" style="position:absolute;"> 
    <p>Draggable</p> 
</div> 
<br /> 
<br /> 
<div id="droppable"> 
    <p>Drop here</p> 
</div> 

CSS

.draggable { 
    width:65px; 
    border: 1px solid blue; 
} 

#droppable { 
    border:1px solid green; 
    width:300px; 
    height:100px; 
} 

的jQuery/JavaScript的

var dropped = false; 

$(".draggable").draggable(); 

$("body").on(".draggable dragstart", 
    function(event, ui) { 
     dropped = false; 
     console.log('1'); 
     ui.helper.before(ui.helper.clone().draggable());           
    } 
); 

$("body").on(".drggable dragstop", 
    function(event, ui) { 
     if(dropped) 
      ui.helper.draggable('destroy'); 
     else 
      ui.helper.remove(); 
    } 
); 

$('#droppable').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     dropped = true; 
    } 
}); 

例

Fiddle