TableDnD onDrop事件未触发

Question

我相信这是很简单的事情，通常是这样的。

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

对于tableDnD，jQuery表排序插件，我有上面的代码。这是它们提供的示例中的确切代码，但当我将项放在表中时，它不会正确触发onDrop事件。我在控制台里没有得到回应。表是初始化的，拖动句柄工作正常，所以我至少知道代码的一部分是正确的。我唯一不能工作的就是onDrop命令。

更新：

我更新了上面的代码，添加了一个onDragStart和onDragClass，它们都工作得很好，只是onDrop函数失败了。

这是我的总表布局：

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

Answer 1

嗯，我的第一个问题，我得到了答案。希望这对将来的人有帮助。

问题在于我的表行的实际ID。我实际上使用了uuid，这意味着我的行实际上有一个类似于"26b5122e-bbb8-11e1-9c53-d4856404b576“的ID。显然，TableDnD对数据进行了某种序列化，这些数据打破了我的ID，只获取了最后一组数字，对于大多数项目来说，这些数字都是相同的。

导致此问题的jquery.tablednd.js文件中的行如下(第380行左右)：

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

result += tableId + '[]=' + rowId;
...

我只是删除了序列化程序，因为我知道我不需要它作为我的行ID。然后我把行号给了我自己。这就是结果。

...
var rowId = rows[i].id;

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

因此，如果在行ID中使用破折号，请确保将其更改为使onDrop触发器正确。

Answer 2

必须定义trid属性才能使onDrop工作。这是因为onDrop只在行顺序更改时触发。但是，如果不指定trid属性，tableDnD.serialize()将认为没有任何重新排序。(肯定有错误)

Answer 3

快修好。

如果你想让onDrop在没有row.id的情况下工作，可以编辑插件。

替换它(第255行是函数开始的地方- currentOrder)

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

有了这个

    return $(this.dragObject).index();