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

Question

请参阅jsfiddle .

我想添加一个新的 div(在我的示例中为 Row)，它可以添加到另一个 div(Button在我的示例中)通过拖放(jQuery UI)。

我在辅助函数 (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;
}

我希望通过将带有 buttonDashboard 类的 div 放入带有 的 div 来显示 ok 消息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;
}