Search code examples
javascriptjquerytablednd

TableDnD onDrop event not firing


I'm sure this is something very simple, it usually is.

$('#sort-table').tableDnD({
    onDragClass: "dnd_drag",
    onDragStart: function(table, row) {
        console.log("start drag");
    },
    onDrop: function(table, row) {
        console.log($.tableDnD.serialize());
    },
    dragHandle: ".dragHandle"
});

I have the above code in action for tableDnD, the jQuery table sorting plugin. This is the exact code from the samples they provide, but it doesn't fire the onDrop event correctly when I drop an item in the table. I get no response in the console. The table does initialize, and the drag handle works properly, so I at least know that portion of the code is correct. The only thing I can't get to work is the onDrop command.

Update:
I updated the code above to add an onDragStart and onDragClass, both of which work perfect, it is only the onDrop function failing.

This is my general table layout:

<table id="sort-table">
    <tbody class="sort-items">
        <tr class="1">
            <td class="dragHandle"></td>
            ...
        </tr>
        ...
    </tbody>
</table>

Solution

  • Well my first question and I got the answer to it. Hope this helps someone in the future.

    The issue was with the actual ID's of my table rows. I actually had use of uuid which meant that my rows actually had an ID similar to "26b5122e-bbb8-11e1-9c53-d4856404b576". Apparently TableDnD does some sort of serializing of the data that broke my ID's apart and only grabbed the last group of numbers, which for most items were the same.

    The line from the jquery.tablednd.js file that was causing the issue was this (around line 380):

    ...
    var rowId = rows[i].id;
    if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
        rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
    }
    
    result += tableId + '[]=' + rowId;
    ...
    

    I simply removed the serializer since I knew I wouldn't need it for my row IDs. Then I passed the row ID along myself. This was the result.

    ...
    var rowId = rows[i].id;
    
    result += tableId + '[]=' + rows[i].id;
    ...
    

    So if you use dashes in your row IDs, make sure to change this to make the onDrop fire correctly.