jQuery：多個可拖動和可拖放？

Question

我試圖使用jQuery的可拖動和可拖拽。

我在我的頁面上有多個可拖放和多個可拖放對象。

drga和drop的工作正常，但問題是，當我拖放div到1 droppable，它會克隆在我的網頁上的其他droppables以及...當我移動拖動內可以放棄，他們再次成倍增長。

要解釋這個問題，我已經創造了這個FIDDLE

，這是我的全部代碼：

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

拖動紅色的div到黑色的div，你應該看到這個問題。

請問有人能就這個問題提出建議嗎？

任何幫助，將不勝感激。

編輯：

親近，但還是不太有：https://jsfiddle.net/qkhunz8k/2/

Answer 1

編輯：顯然，我不是溝通非常好。讓我再試一次。您所有的可投入物都有類別droppable。正如你所說，他們當然是。這是班級的目的。

但是，在您的代碼中，當您說x.appendTo('.droppable')時，這是您的重複項的來源。它附加到每個具有droppable類的元素。

我並不是建議你改變或刪除droppable類。我並不是建議你改變你所有的jQuery選擇器。我只是建議，當你做你的.appendTo，也許你應該只將它追加到droppable這是目標。不是所有的人。那有意義嗎？你可以通過做x.appendTo(this)來做到這一點。只需更改該行，並查看重複問題是否消失。

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

這個改變將做的唯一的事情就是改變你的可拖動元素追加到的元素的數量。它不會導致任何其他變化。但我認爲它會解決你原來的問題。

另外，我可能會建議您通過更改其他行來獲得更好的結果嗎？如果您要使用ui.draggable而不是ui.helper，則可能會發現css定位會更易於管理，並且您不需要太多地操縱top和left屬性。只是一個想法。

var x = ui.draggable.clone(); 

更新您的提琴here