web-dev-qa-db-fra.com

Lorsque je crée un clone déplaçable et le dépose dans une liste de dépôt, je ne peux plus le faire

Lorsque je crée un clone déplaçable et que je le dépose dans une liste déroulante, je ne peux plus le faire glisser. Comment je fais ça? Deuxièmement, je ne peux comprendre que comment nous .append ajouter le clone à la liste de dépôt. Mais ensuite, il se positionne dans le coin supérieur gauche après tout élément existant et non dans 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>
jquerydrag-and-dropclonejquery-ui-draggablejquery-ui-droppable
54
Cudos

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

51
Cudos

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

$(this).append($(ui.helper).clone());
25
Bob Nadler

Pour ceux qui essaient de repositionner l’élément déposé. Jetez un coup d'oeil ici.

Jquery glisser/déposer et cloner .

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

5
rado

Voici ma solution, elle permet de glisser-déposer un clone, puis de le remplacer si nécessaire par un autre glisser-déposer. Il a également un paramètre de fonction de rappel qui renvoie l'objet div déposé afin que vous puissiez faire quelque chose avec la div sélectionnée jquery une fois 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'));
    }
  });
}
0
Damon Hogan