Jquery拖放元素留在列表中并创建另一个

Question

我有可以拖放到 <div class="droppable"> 中的元素列表。但是在拖放后，拖动的元素必须留在列表中。例如，如果我拖放<p class="draggable" name="name">Name</p>，它将保留在第一个 div 中并在<div class="droppable">中创建

<div>
    <p class="draggable" name="name">Name</p>
    <p class="draggable" name="LastName">LastName</p>
    <p class="draggable" name="Country">Country</p>
</div>


<div class="droppable">
</div>


$(function() {
   $( ".draggable" ).draggable();
   });


   $('.droppable').droppable({
        accept: '.draggable',
         drop: function(){
            alert("HEY!");
        }
   });

Answer 1

使用 drop 函数内部的 Clone 来创建拖动元素的克隆

DEMO

 $(".draggable").draggable({
     helper: "clone"
 });

 $('.droppable').droppable({
     accept: '.draggable',
     drop: function (e, ui) {
         $(ui.draggable).clone().appendTo($(this));
     }
 });