如何使用 jQuery 克隆元素？

Posted 2023-05-08

【中文标题】如何使用 jQuery 克隆元素？

【英文标题】：How to clone an element with jQuery?

【发布时间】：2017-11-11 11:20:44

【问题描述】：

我正在尝试使用 jQuery 实现拖放功能，效果很好，现在我想用旧位置的另一个元素替换拖动的元素。

我正在使用clone() 方法，但由于我是 jQuery 新手，我编写的代码会无限克隆元素，有人可以帮助我吗？

这是我的代码：

<script> 
$(function() 
    $(".draggable").draggable(
        
            drag : function(event, ui) 
                $(this).clone().appendTo(this)
            
        );

    $(".droppable").droppable(
        drop: function(event, ui) 
            $(this).addClass("ui-state-highlight")
        
    );
);
</script>

【问题讨论】：

您在拖动处理程序中克隆元素。分配给拖动的函数：在拖动元素时不断调用。将处理程序分配给 start: 或 stop: 以在您开始或停止拖动时克隆它，但在拖动时不重复。

是的，我猜到了，但我如何分配给这些方法？

When I make a draggable clone and drop it in a droppable I cannot drag it again的可能重复

【参考方案1】：

这基本上有效。但是您必须根据需要对其进行调整。

var dropclone;
$( ".draggable" ).draggable(
    start: function (event, ui) 
        dropclone = ui.helper.clone();
    
);
$( ".droppable" ).droppable(
    drop: function() 
        $('body').append(dropclone);
    
);