添加新行后拖放不起作用

Question

我正在使用jquery.tablednd.0.7.min.js拖放表格行。 當我在表中動態添加新行（即使用 javascript 添加行）時，該新行沒有拖放。 可以拖動表中已經存在的其他行。

我認為這個新行沒有與 jQuery 拖放代碼同步。

我加入如新排本。

這是 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");
            }
        });

}

在主體 onload 中調用 sample() 函數，並在每個新行條目時間再次調用 sample() 函數。

注意：為避免兩次問題，請嘗試在 jquery 中使用“live”功能

Answer 4

就這么簡單：

$("#tableId").tableDnDUpdate()

添加新行后。

Answer 5

如果新添加的行 tr 與現有行具有相同的 id，則 tablednd 可能無法使其可拖動。

Answer 6

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

我用這個解決了同樣的問題