克隆可拖动元素 jQuery UI答案

【问题标题】：Clone draggable element jQuery UI克隆可拖动元素 jQuery UI
【发布时间】：2014-06-07 09:41:33
【问题描述】：

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

【问题讨论】：

标签： jquery-ui

【解决方案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

【讨论】：

非常感谢它的帮助。我想要一个解决方案“一旦元素掉落它就不能移动到任何地方”