jQuery UI 可放置在动态添加的元素上？

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功能，你重新申请可投放到所有.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
}