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

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

Answer 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正确启动.