无法将动态创建的droppable中的draggable拖放到另一个droppable中

Posted 2021-03-31

请参阅jsfiddle。

我想添加一个新的div（Row in my example），可以通过拖放（jQuery UI）添加到另一个div（Button in my example）。

我在辅助函数（$row）中创建了新的div（addNewRow）并添加了新的函数来拖放另一个div，就像这样：

$('.rowDashboard').draggable({
        containment: '#content',
        cursor: 'move',
        helper: addNewRow,       
        revert: "invalid",
    });

// helper function
function addNewRow() {
     $row = $(document.createElement('div'));
     $row.attr("id","droppableDiv");
     $row.html("drop here");
     $row.droppable({
        accept: ".buttonDashboard",
       // greedy: true,
        drop: function (ev, ui) {
        alert('ok');                    
        },
    });
     return $row;
}

我期望ok消息会出现div与buttonDashboard类div与rowDraggable，但drop函数不会发射。

在辅助函数中添加drop函数是否正确？

如果不正确，那么解决方案是什么？

谢谢你。

答案

我修改了你的jsfiddle和created a new DEMO which works

我已经从droppable函数中删除了helper初始化代码，重新构建了您的代码。

这是修改后的代码：

var rowIndex = 0;
var buttonIndex = 0;

$(init);

function init() {
    $('.rowDashboard').draggable({
        containment: '#content',
        cursor: 'move',
        helper: addNewRow,       
        revert: "invalid",
    });

    $('#content').droppable({
                    greedy: true,
            accept: ".rowDashboard",
            drop: function (ev, ui) {
                ui.helper.attr('style', '');
                $(ui.helper).addClass('rowDraggable');
                $item = $(ui.helper).clone();
                $item.appendTo('#content');
                //console.log('dropped');
                $item.droppable({
                    accept: ".buttonDashboard",
                    greedy: true,
                    drop: function (ev, ui) {
                    alert('ok');                    
                    },
                });
            },
        });       

    //------- buttonDraggable -----------
    $('.buttonDashboard').draggable({
        //containment: '#content',
        cursor: 'move',
        helper: addNewButton,
        //helper: "clone"
    });      
}

function addNewButton() {
    buttonIndex++;
    return '<input type=\'button\' value=\'button ' + buttonIndex + ' \'>   </input>';
}

function addNewRow() {
     $row = $(document.createElement('div'));
     //$row.attr("id","droppableDiv");
     $row.html("drop here");

     return $row;
}