When I make a draggable clone and drop it in a droppable I cannot drag it again

Question

When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us .append to add the clone to the droppable. But then it snaps to the top-left corner after any existing element and not the drop position.

$(document).ready(function() {     $("#container").droppable({         drop: function(event, ui) {             $(this).append($(ui.draggable).clone());         }     });     $(".product").draggable({         helper: 'clone'     }); }); </script>  <div id="container"> </div> <div id="products">     <img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />     <img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />     <img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" /> </div> 

Answer 1

One way to do it is:

$(document).ready(function() {     $("#container").droppable({         accept: '.product',         drop: function(event, ui) {             $(this).append($("ui.draggable").clone());             $("#container .product").addClass("item");             $(".item").removeClass("ui-draggable product");             $(".item").draggable({                 containment: 'parent',                 grid: [150,150]             });         }     });     $(".product").draggable({         helper: 'clone'     }); }); 

But I'm not sure if it is nice and clean coding.