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

.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

当您在 add_box 功能中呼叫$(".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
}

动态添加元素上的jQuery UI droppable？

1 个答案: