Quand je fais un clone draggable et déposez-le dans un largable je ne peux pas le faire glisser à nouveau

Question

Quand je fais un clone draggable et déposez-le dans un largable je ne peux pas le faire glisser à nouveau. Comment je fais ça? Deuxièmement, je ne peux que comprendre comment nous .append pour ajouter le clone à la droppable. Mais ensuite, il s'accroche au coin supérieur gauche après tout élément existant et non la position de chute.

$(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 le codage agréable et propre.

Answer 2

J'ai trouvé cette question via Google. Je ne pouvais pas garder les positions de claquer sur le contenant soit, jusqu'à ce que je changé « ui.draggable » à « ui.helper » quand annexant:

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

Answer 3

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

Jquery drag /drop and clone.

j'ai eu à 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.

Answer 4

Voici ma solution, elle permet de glisser-déposer un clone, puis le remplacer après au besoin par un autre glisser-déposer. Il a également un paramètre de fonction de rappel qui repasse l'objet div déposé afin que vous puissiez faire quelque chose avec le div sélectionné jquery une fois abandonné.

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