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（）将认为没有任何重新排序。（肯定是错误的）

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

TableDnD onDrop事件未触发

3 个答案: