2

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");
        }
    });
});
4
  • 1
    Share some code or jsfiddle plz.
    – yogi
    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. 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() Sep 28, 2012 at 8:08
  • @imrantariq see my answer below Sep 28, 2012 at 8:13

6 Answers 6

10

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

1
  • This is the correct answer - as pointed out the other answers will result in double binding of the sorter.
    – GuruBob
    Jul 4, 2016 at 23:09
6

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");
        }
    });
}
1
  • It works but drag event is attached twice to already existing rows and if another row added then this event attached to them thrice. worry :( Sep 28, 2012 at 9:42
3

As simple as:

$("#tableId").tableDnDUpdate()

after adding that new row.

2

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

3
  • It works but drag event is attached twice to already existing rows and if another row added then this event attached to them thrice. worry :( Sep 28, 2012 at 9:43
  • live can be used with events. please give me example Sep 28, 2012 at 10:02
  • See my code in question and tell me where to put this live() please. Sep 28, 2012 at 11:23
0

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

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

I solved same issue with this

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.