15

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>

3 Answers 3

31

You must define tr[id] attribute to make onDrop work. This is because onDrop only fire when row order changed. However, without specifying tr[id] attribute, tableDnD.serialize() will think there was not any re-order. (Bug for sure)

1
  • 1
    When i added the id to the tr, onDrop event started working
    – Memonic
    Commented Nov 26, 2015 at 12:57
8

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.

1

Quick fix.

If you want onDrop to work without having row.id, you can edit plugin.

Replace this (line 255 is where function starts - currentOrder)

        var rows = this.currentTable.rows;
        return $.map(rows, function (val) {
            return ($(val).data('level') + val.id).replace(/\s/g, '');
        }).join('');

With this

    return $(this.dragObject).index();
3
  • Generally it isn't a great idea to modify a third-party plugin like this in the event of future updates. If I had changed this to be as you suggest I either have to create and maintain my own fork of the tableDnD plugin, or I have to update the plugin again anytime an upgrade is applied for the plugin. It complicates the process for moving forward with future improvements.
    – Beau
    Commented Mar 3, 2015 at 14:58
  • It is true what you are saying, that is why noted "Quick fix", you have to take care. I have plan to make PR on github, but need some time to create normal solution, not just "hack".
    – Mr Br
    Commented Mar 3, 2015 at 21:04
  • Better solution is to give each row an id. No harm in that.
    – Vincent
    Commented Jun 27, 2015 at 20:47

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.