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

Question

我有<div class="droppable">中拖放的元素列表。但是在掉落后，拖曳的元素必须留在列表中。例如，如果我拖放<p class="draggable" name="name">Name</p＆gt;它将保留在第一个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));
     }
 });