Wenn ich einen ziehbaren Klon mache und ihn in ein DropProp lege, kann ich ihn nicht mehr ziehen

Question

Wenn ich einen ziehbaren Klon mache und ihn in einen DropPable lasse, kann ich ihn nicht mehr ziehen. Wie mache ich das? Zweitens kann ich nur herausfinden, wie man uns .append den Klon dem Droppable hinzufügt. Aber dann schnappt es nach einem vorhandenen Element und nicht nach der Drop-Position in die obere linke Ecke.

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

Eine Möglichkeit, es zu tun ist:

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

Aber ich bin nicht sicher, ob es schön und sauber Codierung ist.

Answer 2

Ich habe diese Frage über Google gefunden. Ich konnte nicht die Positionen hält entweder in den Behälter schnappen, bis ich ‚ui.draggable‘ auf ‚ui.helper‘ geändert beim Anhang:

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

Answer 3

Für diejenigen, die versuchen die abgelegten Artikel neu zu positionieren. Schaue hier nach.

Jquery drag /drop and clone.

Ich hatte tatsächlich Code zu verwenden, wie es

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

zu tun aussieht.

Answer 4

Hier ist meine Lösung, es ermöglicht das Ziehen und Ablegen eines Klons und dann nach Bedarf durch ein anderes Drag & Drop ersetzen. Es hat auch einen Callback-Funktionsparameter, der das abgelegte div-Objekt zurückgibt, so dass Sie etwas mit dem jquery-ausgewählten div tun können, nachdem es gelöscht wurde.

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