クローンされた要素でDroppableが動作しない

Question

私はドラッグアンドドロップシステムを持っています。私はドロップ可能な複数のdivとドラッグ可能な複数のdivを持っています。 その後、私はクローンシステムをドロップ可能領域に実装しました。私のドロップ可能なdivはすべてクローン化でき、それも問題なく動作しています。

問題は、要素をクローンしたドラッグ可能な領域にドラッグしようとするときです。 ドラッグ可能なdivはクローンされたドロップ可能領域をドロップ可能領域として検出しません。元のdropp領域にドラッグすることしかできません。

ドラッグ可能なdivに、削除可能な新しい要素があることを知らせるために何かを更新する必要がありますか？

--- EDIT ---

同じ問題を持つすべての人に、あなたはクローンの前にドロップ可能を破壊する必要があります。 は、だからあなたのクローン機能では、ちょうどこの

$(".drop").droppable("destroy"); 

してからクローンを入れ、その後、あなたは再びドロップ可能な関数を呼び出します。

Answer 1

セットアップでjQuery UIを使用していますか？ドラッグされたdivのクラス名を変更しようとする必要があります。次のように試してみてください：

$("#draggable").addClass("newClassName"); 

これを済ませたら、そのアイテムを受け入れるようにあなたの落書きを設定してください。 jQuery UIのようなサウンドは、あなたのアイテムは既にドロップされていると思う。あなたがドロップイベントに更新機能を呼び出すことにより、新しく作成されたdroppablesを再初期化することができため、あなたが探しているものを達成するために

$("#droppable").droppable({ 
     accept: ".newClassName", 

Answer 2

。私はあなたが提供した例を使ってこれに来ました。やってみて。

$(document).ready(function() { 
      $(".duplicatedrop").click(
      function() { 
      $(".drop").clone(true, true).appendTo(".drop"); 
      } 
     ); 

    $(function() { 
     $(".drag").draggable({ 
      revert: true, 
      cursor: 'move' 
     }); 
    }); 


    updateDroppables(); 

    function updateDroppables(){ 
     $(".drop").droppable({ 
      accept: ".drag", 
      drop: function(event, ui) { 
       $(this).find("p").html("Dropped!"); 
       var clone = $(this).clone(); 
       clone.appendTo('body'); 
       updateDroppables(); 
      } 
     }); 
    }; 
});