Question

我想添加row (div)，然后将button添加到row，拖放到 jQuery UI ，如下所示：（jsfiddle）

HTML

<div class="rowDashboard">Row</div>
<div class="buttonDashboard">Button</div>
<div id="content"></div>

脚本

var rowIndex = 0;
var buttonIndex = 0;

$(init);

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

    $('#content').droppable({      
        accept: ".rowDashboard",
        drop: function (ev, ui) {
            ui.helper.attr('style', '');
            $(ui.helper).addClass('rowDraggable');
            ui.helper.clone().appendTo('#content');
        },
    });

    //------ sortable rows --------------
    $("#content").sortable({
        cancel: ".fixed"
    });
    $("#content").disableSelection();
    // ----------------------------------

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

    $('.rowDraggable').droppable({       
        accept: ".buttonDashboard",      
        drop: function (ev, ui) {
            ui.helper.attr('style', '');
            $(ui.helper).addClass('buttonDraggable');
            ui.helper.clone().appendTo($(this));
        },
    });
}

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

function addNewRow() {
    rowIndex++;
    return '<div> Row ' + rowIndex + '  </div>';
}

但我不知道为什么button不会添加到row。

如果有人能解释这个问题的解决方案，那将非常有帮助。

Answer 1

在第14行修改此代码：

$('#content').droppable({      
    accept: ".rowDashboard, .buttonDashboard",
    drop: function (ev, ui) {
        ui.helper.attr('style', '');
        if(ui.draggable.hasClass('rowDashboard')) {
             $(ui.helper).addClass('rowDraggable');
        } else { 
             $(ui.helper).addClass('buttonDraggable');
        } 

        $(ui.helper).addClass('rowDraggable');
        ui.helper.clone().appendTo('#content');
    },
});

Answer 2

我找到了解决这个问题的方法。我在创建droppable元素之前应用row。

我编辑了这部分（Solution JSFiddle）：

$('#content').droppable({      
        accept: ".rowDashboard",
        drop: function (ev, ui) {
            ui.helper.attr('style', '');
            $(ui.helper).addClass('rowDraggable');
            ui.helper.clone().appendTo('#content');
        },
    });

为：

$('#content').droppable({
    accept: ".rowDashboard",
    drop: function (ev, ui) {
        ui.helper.attr('style', '');
        $(ui.helper).addClass('rowDraggable');
        $item = $(ui.helper).clone();
        $item.appendTo('#content');
        enableDroppable($item); // Dynamically enable droppable property of new row.
    },
});

// this method enables droppable property item
function enableDroppable($item) {
    $item.droppable({
        accept: ".buttonDashboard",
        drop: function (ev, ui) {
            ui.helper.attr('style', '');
            $(ui.helper).addClass('buttonDraggable');
            ui.helper.clone().appendTo($(this));
        },
    });
}

通过jQuery UI动态地将可拖动元素添加到div

2 个答案: