无法将可拖动对象拖放到另一个可拖放对象内动态创建的可拖放对象上

Question

请参阅jsfiddle。

我想添加一个新的 div (Row in my example)，可以通过拖放 (jQuery UI) 将另一个 div (Button in my example) 添加到其中。 p>

我在辅助函数 (addNewRow) 中创建了新的 div ($row) 并添加了新的函数来拖放另一个 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 消息会通过将带有 buttonDashboard 类的 div 删除到带有 rowDraggable 的 div 而出现，但 drop 函数不会触发。

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

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

提前感谢。

Answer 1

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

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

这里是修改后的代码：

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