wake-up-neo.com

Wenn ich einen ziehbaren Klon mache und ihn in einem abnehmbaren Objekt ablege, kann ich ihn nicht mehr ziehen

Wenn ich einen ziehbaren Klon mache und ihn in einem abnehmbaren Objekt ablege, kann ich ihn nicht mehr ziehen. Wie mache ich das? Zweitens kann ich nur herausfinden, wie wir .append den Klon zur Dropable hinzufügen können. Dann rastet es nach einem vorhandenen Element an der oberen linken Ecke ein und nicht an der Ablageposition.

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

Eine Möglichkeit, dies 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'
    });
});

Ich bin mir aber nicht sicher, ob es eine schöne und saubere Codierung ist.

51
Cudos

Ich habe diese Frage über Google gefunden. Ich konnte die Positionen auch nicht davon abhalten, den Container zu fangen, bis ich beim Anhängen von "ui.draggable" in "ui.helper" geändert habe:

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

Für diejenigen, die versuchen, das abgelegte Objekt neu zu positionieren. Schauen Sie sich hier um.

Jquery Drag/Drop und Klon .

Ich musste tatsächlich Code verwenden, der aussieht

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

es zu tun.

5
rado

Hier ist meine Lösung. Sie ermöglicht das Ziehen und Ablegen eines Klons und das anschließende Ersetzen des Klons durch ein anderes Drag & Drop. Es hat auch einen Callback-Funktionsparameter, der das abgelegte div-Objekt zurückgibt, so dass Sie etwas mit der ausgewählten jquery-Funktion tun können, wenn div 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'));
    }
  });
}
0
Damon Hogan