動的に追加された要素にjQuery UIがドロップできますか？

Question

動的に作成されたdivにjQueryUI droppableを適用する際に問題があります。

$(".item").draggable({ helper: 'clone'}); 

$(".box").draggable({containment : '#area'}); 
$(".box").droppable({ 
    drop: function(event, ui) { 
     if ($(ui.draggable).hasClass("area")){ 
      // call another function 
     }else{ 
      $(this).append($(ui.draggable).clone().removeClass('item').addClass('area')); 
      $('.area').draggable(); 
     } 
    } 
}); 

.itemは.boxに落下することになっています。私は（ボタンをクリックして）第2の機能を呼び出すまで、それはうまく動作します：

function add_box(){ 
    $("<div class='box'></div>").prependTo("#area"); 

    $(".box").droppable(); // i tried this (didn't work). 

    $(".box").draggable(); // should be draggable as well 
} 

Answer 1

あなたは$(".box").droppable();でadd_box関数を呼び出しているとき、あなたはすべての■は項目にドロップ可能を再適用しています、オプションはありませんので、期待した動作を失ってしまいます。

新しく作成された要素にのみ適用する必要があります。また、オプションも定義する必要があります。例えば、次のようなことをすることができます：