javascript - jquery 拖放，不允许放置在克隆放置容器上

Question

尝试将项目拖放到克隆 div，但它不起作用。看起来 jquery 拖放不允许放在克隆项目上。

在我单击添加更多放置区后，在第一个上进行拖放操作，并尝试将项目放置到新的放置区。这是不允许的。

这是我的jsfiddle

$(document).on("click", ".add_dropzone", function(e){
$('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());});

$( "ul li" ).each(function(){
    $(this).draggable({
        helper: "clone"
    });
});

$( ".dropzone" ).droppable({
    activeClass: "active",
    hoverClass: "ui-state-active",
            tolerance: "touch", 
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {

        var targetElem = $(this).attr("id");

        $( this ).addClass( "ui-state-highlight" );

        if($(ui.draggable).hasClass('draggable-source'))
            $( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');


        else

            $( ui.draggable ).appendTo( this );

            $('.delete').on('click', function () {
            $(this).parent().parent().parent().parent('li').remove();
        });
        //alert($(this).text());
    }

}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $( this ).removeClass( "ui-state-default" );
    }
});

任何帮助将不胜感激!

Answer 1

怎么样this

我已将初始化代码移至函数

最终代码如下所示

$(document).on("click", ".add_dropzone", function (e) {
    $('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());
    initDroppable();
});

$("ul li").each(function () {
    $(this).draggable({
        helper: "clone"
    });
});
initDroppable();

function initDroppable() {
    if (typeof window.dropElem != "undefined") window.dropElem.droppable('destroy');
    window.dropElem = $(".dropzone").droppable({
        activeClass: "active",
        hoverClass: "ui-state-active",
        tolerance: "touch",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {

            var targetElem = $(this).attr("id");

            $(this).addClass("ui-state-highlight");

            if ($(ui.draggable).hasClass('draggable-source')) $(ui.draggable).clone().appendTo(this).removeClass('draggable-source');


            else $(ui.draggable).appendTo(this);

            $('.delete').on('click', function () {
                $(this).parent().parent().parent().parent('li').remove();
            });
            //alert($(this).text());
        }

    }).sortable({
        items: "li:not(.placeholder)",
        sort: function () {
            $(this).removeClass("ui-state-default");
        }
    });
}