Lorsque je crée un clone de draggable et que je le dépose dans un droppable, je ne peux pas le faire glisser à nouveau.

Question

Lorsque je crée un clone de dragging et que je le dépose dans un droppable, je ne peux plus le glisser à nouveau. Comment faire ? Ensuite, je n'arrive qu'à comprendre comment utiliser les éléments suivants .append pour ajouter le clone au droppable. Mais il s'accroche alors au coin supérieur gauche après tout élément existant et non à la position de dépôt.

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

Une façon de le faire est :

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

Mais je ne suis pas sûr que ce soit un codage agréable et propre.

Answer 2

J'ai trouvé cette question via Google. Je ne parvenais pas non plus à empêcher les positions de s'accrocher au conteneur, jusqu'à ce que je remplace "ui.draggable" par "ui.helper" lors de l'ajout :

$(this).append($(ui.helper).clone());

Answer 3

Pour ceux qui essaient de repositionner l'objet abandonné. Jetez un coup d'oeil ici.

Jquery drag /drop et clone .

En fait, j'ai dû utiliser un code qui ressemble à

$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);

pour le faire.