Sürüklenebilir bir klon yapmak ve droppable bırakın zaman tekrar sürükleyin edemem. Nasıl yapabilirim? İkincisi sadece bize .append droppable klon eklemek için nasıl anlamaya. Ama o zaman varolan herhangi bir öğe sonra sol üst köşede bırak konumda değil akla getirir.

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

Bunu yapmak için bir yoldur:

$(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'
    });
});

Ama eğer güzel ve temiz kodlama olup olmadığından emin değilim.