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

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

• javascript
• jquery
• drag-and-drop

• 1 Share some code or jsfiddle plz. – yogi Commented Sep 28, 2012 at 7:57
• 1 This is because the event is attached to the row on page load, therefore new rows appended after that will not be bound to the drag/drop function. You will need to use either delegate() or on() with a delegate selector to achieve this. If you post you code I can show you exactly how. – Rory McCrossan Commented Sep 28, 2012 at 7:59
• @RoryMcCrossan. Yes you are right, event is attached to the row on page load. Please show me how can I use delegate() – Muhammad Imran Tariq Commented Sep 28, 2012 at 8:08
• @imrantariq see my answer below – Rory McCrossan Commented Sep 28, 2012 at 8:13

6 Answers 6

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

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

As simple as:

$("#tableId").tableDnDUpdate()

after adding that new row.

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

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

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

I solved same issue with this