javascript - 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 (i.e. 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).