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

Question

请参阅jsfiddle。

我想添加一个新的 div (Row in my example)，可以通过拖放 (jQueryUI).

我在辅助函数 (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 消息会通过将 div 和 buttonDashboard class 丢弃到 div 和 rowDraggable 而 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;
}