Question

请参阅jsfiddle。

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

我在辅助函数（$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消息火。

在辅助函数中添加ReportClass rpt; rpt.ReportDefinition.ReportObjects["col2"].ObjectFormat.EnableSuppress = true; rpt.ReportDefinition.ReportObjects["col3"].Left = rpt.ReportDefinition.ReportObjects["col2"].Left;函数是否正确？

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

谢谢你。

Answer 1

我修改了你的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;
}

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

1 个答案: