Drag and drop not working after adding new row

Question

I'm using jquery.tablednd.0.7.min.js to drag and drop table rows. When I add new row in table dynamically (ie with javascript add row) that new row did not drag n drop. Other rows that are already present in table can be dragged.

I think this new row is not being synched with jQuery drag n drop code.

I am adding new row like this .

This is jquery dragnDrop file code.

On page load I am using this code to assign this functionality to table

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

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

Answer 1

Just use $("#tableId").tableDnDUpdate()

From the docs:

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

You haven't shown the code which does the appending of the rows, which is where you would need to rebind the tableDnD related events, but it would look something like this:

$(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

Please try this:

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

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

}

Call sample() function in body onload and once again call sample() function in each new row entry time.

Note: To Avoid twice issue please try to use "live" function in jquery

Answer 4

As simple as:

$("#tableId").tableDnDUpdate()

after adding that new row.

Answer 5

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

Answer 6

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

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