jquery - 如何选择当前拖动元素？

Question

在下面的代码中，克隆元素时它会克隆之前添加的元素。在拖动第二个元素时，它也会克隆第一个元素。总共会出现 3 个元素。如何只克隆当前的 div？。

Fiddle

   $(document).ready(function($) {
    var a=0;
    $("div[id^='product']").draggable({
        helper: function () {
            return $("<div class='dragger'></div>").append($(this).clone().append("<button>remove</button>"));
        }
    });

    $("#dropcombo").droppable({
        drop: function (event, ui) {    
        a++;    
           $(this)
                .find("p")
                .text(a);
            var element = $('.ui-draggable-dragging');
            var currentDrop=$(this);
            return element.clone().appendTo(currentDrop);
        }
    });
    $(document).on('click', 'button', function(){
        $(this).parent().remove();

    });
  });

<div id="product1" class="draggable">
    <h1>AA</h1>
</div>
<div id="product2" class="draggable">
    <h1>AA</h1>
</div>
<div id="product3" class="draggable">
    <h1>AA</h1>
</div>
<div id="product4" class="draggable">
    <h1>AA</h1>
</div>
<div id="dropcombo">
    <h3>Drop packages to buy</h3>
    <div> you have selected <p>0</p> packages</div>
    <img id="imgg" src="images/Packages.png">
</div>

Answer 1

你必须先阅读来自 jquery draggable 的文档

然后通过为可拖动定义事件来帮助自己。当两种情况下的拖动开始和拖动停止事件都被触发时，首先定义这些回调，然后您需要使用所需的操作手动操作可拖动事件