Lorsque je crée un clone déplaçable et que je le jette dans un contenant, je ne peux plus le faire glisser

Lorsque je crée un clone pouvant être déplacé et que je le jette dans un contenant, je ne peux plus le faire glisser. Comment je fais ça? Deuxièmement, je ne peux que comprendre comment nous .append pour append le clone à la droppable. Mais ensuite, il se place dans le coin supérieur gauche après tout élément existant et non dans la position de repository.

 $(document).ready(function() { $("#container").droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); $(".product").draggable({ helper: 'clone' }); });  

    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 agréable et propre.

    J’ai trouvé cette question via Google. Je ne pouvais pas empêcher les positions de s’accrocher au conteneur, jusqu’à ce que je modifie «ui.draggable» en «ui.helper» lorsque j’ajoutais:

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

    Pour ceux qui essaient de repositionner l’article déposé. Regardez ici.

    Jquery drag / drop et clone .

    Je devais en fait utiliser le 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.

    Voici ma solution, elle permet de glisser-déposer un clone, puis de le remplacer au besoin par un autre glisser-déposer. Il possède également un paramètre de fonction de rappel qui renvoie l’object div déposé afin que vous puissiez faire quelque chose avec le div sélectionné par jquery une fois qu’il a été supprimé.

     refreshDragDrop = function(dragClassName,dropDivId, callback) { $( "." + dragClassName ).draggable({ connectToSortable: "#" + dropDivId, helper: "clone", revert: "invalid" }); $("#" + dropDivId).droppable({ accept: '.' + dragClassName, drop: function (event, ui) { var $this = $(this), maxItemsCount = 1; if ($this.children('div').length == maxItemsCount ){ //too many item,just replace $(this).html($(ui.draggable).clone()); //ui.sender.draggable('cancel'); } else { $(this).append($(ui.draggable).clone()); } if (typeof callback == "function") callback($this.children('div')); } }); }