TableDnD onDrop事件未触发

我确信这很简单，通常都是。

$('#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函数失败了。

这是我的一般表格布局：

  ...  ...  

Answer 1

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

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

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();