Jquery ui 克隆可拖动元素jQuery UI

我有一个带有可拖动元素的页面，我想将其放入页面的可拖放部分。但是，当我点击可拖动的div时，我实际上想要生成一个克隆，并将其拖动到可拖放的环境中（保留原始的）。本质上，我试图在左手工具箱中创建一系列预制件。当我点击它们将它们拖到绘图中时，我只想生成一个该类型div的克隆。这在JavaScript中可能吗

是的，这是可能的。。这里有一个例子

HTML

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

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;  
    }
});

范例

---

谢谢，这对我很有帮助。我想要一个“元素一旦掉落，就不能移动到任何地方”的解决方案

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;  
    }
});