Cuando hago un clon arrastrable y lo dejo caer en un droppable, no puedo arrastrarlo nuevamente. ¿Cómo puedo hacer eso? En segundo lugar, solo puedo descubrir cómo nosotros.append para agregar el clon al droppable. Pero luego se ajusta a la esquina superior izquierda después de cualquier elemento existente y no a la posición de caída.

$(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>