Как выбрать текущий элемент перетаскивания?

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

то не поможет самостоятельно определяя события для перетаскиваемым. Когда запускается перетаскивание и останавливается перетаскивание в обоих случаях, так что сначала определите эти обратные вызовы, а затем вам необходимо вручную выполнить операцию с перетаскиваемым событием с желаемой операцией.