Drag And Drop Not Working After Adding New Row

I'm using jquery.tablednd.0.7.min.js to drag and drop table rows. When I add new row in table dynamically (i.e. with javascript add row) that new row did not drag n drop. Other row

Solution 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).

Solution 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 loadaddTableDnD();

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

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

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

Solution 3:

As simple as:

$("#tableId").tableDnDUpdate()

after adding that new row.

Solution 4:

Please try this:

functionsample()
{
        $("#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

Solution 5:

If a newly added row tr has the same id as an existing row, tablednd may not make it dragable.