TableDnD onDrop 事件未触发答案

【问题标题】：TableDnD onDrop event not firingTableDnD onDrop 事件未触发
【发布时间】：2017-06-18 05:40:35
【问题描述】：

我确定这很简单，通常是这样。

$('#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>

【问题讨论】：

标签： javascript jquery tablednd

【解决方案1】：

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

【讨论】：

当我将 id 添加到 tr 时，onDrop 事件开始工作

【解决方案2】：

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

问题在于我的表格行的实际 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 不需要它。然后我自己传递了行 ID。结果就是这样。

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

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

因此，如果您在行 ID 中使用破折号，请务必更改它以使 onDrop 正确触发。

【讨论】：

【解决方案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();

【讨论】：

一般来说，在以后更新的情况下修改这样的第三方插件并不是一个好主意。如果我按照您的建议将其更改为我必须创建和维护自己的 tableDnD 插件分支，或者我必须在插件应用升级时再次更新插件。它使推进未来改进的过程变得复杂。
你说的是真的，这就是为什么注明“快速修复”，你必须小心。我计划在 github 上做 PR，但需要一些时间来创建正常的解决方案，而不仅仅是“hack”。
更好的解决方案是给每一行一个id。没有坏处。