jQuery UI droppable на динамически добавленном элементе?

Question

У меня возникла проблема с применением jQueryUI droppable для динамически созданного div.

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

An .item должен упасть в .box. Он работает хорошо, пока я не позову вторую функцию (нажатием кнопки):

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 функцию, вы Droppable повторное всем .box пунктов, но без вариантов, поэтому вы теряете ожидаемое поведение.

Вы должны применить его только к вновь созданному элементу, и вам также необходимо определить ваши параметры. Вы могли бы сделать что-то вроде этого, например:

// define your options as an object 
var droppableOptions = { 
    drop: function(event, ui) { 
     if ($(ui.draggable).hasClass("area")){ 
      // call another function 
     } else { 
      $(this).append($(ui.draggable).clone().removeClass('item').addClass('area')); 
      $('.area').draggable(); 
     } 
    } 
} 

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

    // you apply droppable to your new box, with the options you need 
    newBox.droppable(droppableOptions); 

    newBox.draggable(); // should be draggable as well 
}