jQuery: Mehrere ziehbare und Droppables?

Question

Ich versuche, jquery ziehbare und Dropbare zu verwenden.

Ich habe mehrere ziehbare und mehrere dropables auf meiner Seite.

Die drga und drop funktioniert gut, aber das Problem ist, dass, wenn ich div auf 1 droppable ziehen und fallen lassen, wird es in anderen droppables auf meiner Seite auch geklont ... auch wenn ich die ziehbaren Objekte in die verschieben Droppables, sie werden wieder multipliziert.

dieses Problem zu erklären, ich habe diese FIDDLE

erstellt und dies ist meine gesamte Code:

(function ($) { 
    $.fn.liveDraggable = function (opts) { 
     this.live("mouseover", function() { 
     if (!$(this).data("init")) { 
      $(this).data("init", true).draggable(opts); 
     } 
     }); 
     return this; 
    }; 
}(jQuery)); 
$('.drag').liveDraggable({ 
    helper: 'clone', 
     cursor: 'move' 


     }); 


var x = null; 
$(".droppable").droppable({ 
    drop: function(e, ui) { 
    var parent = $(".droppable"); 
    var x = ui.helper.clone(); 
    var img = $(x) 

    var leftAdj = (ui.position.left - parent.offset().left); 
    var topAdj = (ui.position.top - parent.offset().top); 


    if (x.hasClass("outside")) { 
     x.css({ 
     left: leftAdj, 
     top: topAdj 
     }); 
     x.removeClass("outside"); 

    } 

    x.draggable({ 
     helper: 'original' 
    }); 
    x.find('.ui-resizable-handle').remove(); 
    x.resizable(); 
    x.appendTo('.droppable'); 
    ui.helper.remove(); 
    } 
}); 

Ziehen Sie die roten divs auf die schwarzen divs und Sie sollten das Problem sehen.

Könnte jemand bitte zu diesem Thema beraten?

Jede Hilfe wäre willkommen.

EDIT:

schließen Immer aber immer noch nicht ganz da: https://jsfiddle.net/qkhunz8k/2/

Answer 1

Edit: Anscheinend nicht sehr gut bin ich in Verbindung steht. Lass mich das nochmal versuchen. Alle Ihre Droppables haben die Klasse droppable. Wie du sagst, tun sie es natürlich. Das ist der Zweck der Klasse.

Wenn Sie jedoch in Ihrem Code x.appendTo('.droppable') sagen, ist dies die Quelle Ihrer Duplikate. Es hängt an jedes Element an, das die Klasse droppable hat.

Ich schlage nicht vor, dass Sie die Droppable-Klasse ändern oder entfernen. Ich schlage nicht vor, dass Sie alle Ihre jquery Selektoren ändern. Ich schlage nur vor, dass wenn Sie Ihre .appendTo tun, Sie vielleicht nur an die droppable anhängen sollten, die das Ziel ist. Nicht alle von ihnen. Ist das sinnvoll? Sie können dies tun, indem Sie x.appendTo(this) tun. Ändern Sie einfach diese eine Zeile und sehen Sie, ob das doppelte Problem verschwindet.

$(".droppable").droppable({ 
... 
     x.appendTo(this); 

Das einzige, was diese Änderung machen wird, ist die Anzahl der Elemente ändern, um Ihre ziehbar beigefügtem wird. Es würde keine weiteren Änderungen verursachen. Aber ich denke, dass es dein ursprüngliches Problem lösen wird.

Nebenbei, könnte ich vorschlagen, dass Sie bessere Ergebnisse erhalten würden, indem Sie eine andere Linie ändern? Wenn Sie die ui.draggable anstelle der ui.helper verwenden, könnten Sie feststellen, dass die CSS-Positionierung ein wenig einfacher zu verwalten wäre, und dass Sie die Eigenschaften top und left nicht so sehr manipulieren müssten. Nur ein Gedanke.

var x = ui.draggable.clone(); 

aktualisiert Änderung Ihrer Geige here