jQuery：複数のドラッグ可能なアイテムと削除可能なアイテム？

Question

jqueryをdraggableとdroppableで使用しようとしています。

私は、ページに複数のドラッグと複数のドロップブルを持っています。

drgaとdropはうまく動作しますが、問題を解決するには、divを1つのdroppableにドラッグ＆ドロップすると、ページの他のdroppablesにもクローンが作成されます...また、 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とあなたが問題を見るべきです。

誰かがこの問題について助言してもらえますか？

ご協力いただければ幸いです。

EDIT：

近いが、まだなく、かなり行き方：https://jsfiddle.net/qkhunz8k/2/

Answer 1

編集：どうやら私は非常によく通信していませんよ。もう一度試してみましょう。すべての落下物はクラスdroppableです。あなたが言うように、もちろん彼らはそうします。それがクラスの目的です。

しかし、あなたのコードでは、x.appendTo('.droppable')と言うとき、これはあなたの複製のソースです。 droppableクラスを持つすべての要素に追加されています。

私はあなたがドロップ可能クラスを変更または削除することを提案していません。私はすべてのjqueryセレクタを変更することを提案しているわけではありません。私は、あなたが.appendToをやっているときに、おそらくそれをターゲットであるdroppableに追加するだけでよいことを示唆しています。それらのすべてではありません。それは理にかなっていますか？これを行うにはx.appendTo(this)を実行します。その1行を変更して、重複した問題がなくなるかどうか確認してください。

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

この変更が行うのは、ドラッグ可能な要素が追加される要素の数を変更することだけです。他の変更は起こりません。しかし、私はそれがあなたの元の問題を解決すると思います。

他の行を変更しても良い結果が得られることをお勧めしますか？ ui.helperの代わりにui.draggableを使用する場合は、CSSの配置がやや簡単になり、topとleftのプロパティをそれほど操作する必要がないことがあります。ちょっとした考え。あなたのフィドルhere