Question

我正在使用jquery.tablednd.0.7.min.js来拖放表格行。当我在表中动态添加新行（即使用javascript添加行）时，新行没有拖动。可以拖动表中已存在的其他行。

我认为这个新行没有与jQuery拖放代码同步。

我正在添加像this这样的新行。

This是jquery dragnDrop文件代码。

在页面加载时，我使用此代码将此功能分配给表

$(document).ready(function() {
    $("#tableId").tableDnD({
        onDragClass : "myDragClass",
        onDrop : function(table, row) {

        },
        onDragStart : function(table, row) {
            console.log("drag start");
        }
    });
});

Answer 1

只需使用$("#tableId").tableDnDUpdate()

即可

来自文档：

Will update all the matching tables, that is it will reapply the mousedown method to the rows (or handle cells). This is useful if you have updated the table rows using Ajax and you want to make the table draggable again. The table maintains the original configuration (so you don't have to specify it again).

Answer 2

您没有显示执行行追加的代码，这是您需要重新绑定tableDnD相关事件的地方，但它看起来像这样：

$(document).ready(function() {
    //on load
    addTableDnD();

    //appending a row
    $(".add-row").click(function() {
        $("<tr />").appendTo("#tableId");
        addTableDnD(); // re-attach events to pick up the new row.
    });
});

function addTableDnD() {
    $("#tableId").tableDnD({
        onDragClass : "myDragClass",
        onDrop : function(table, row) {

        },
        onDragStart : function(table, row) {
            console.log("drag start");
        }
    });
}

Answer 3

请试试这个：

function sample()
{
        $("#tableId").tableDnD({
            onDragClass : "myDragClass",
            onDrop : function(table, row) {

            },
            onDragStart : function(table, row) {
                console.log("drag start");
            }
        });

}

在body onload中调用sample（）函数，并在每个新的行输入时间再次调用sample（）函数。

注意：要避免两次出现问题，请尝试在jquery中使用“live”功能

Answer 4

简单如下：

$("#tableId").tableDnDUpdate()

添加新行后。

Answer 5

如果新添加的行tr与现有行具有相同的id，则tablednd可能无法使其可拖动。

Answer 6

$("#table_id").tableDnDUpdate();

我用这个解决了同样的问题

添加新行后拖放不起作用

6 个答案: