TableDnD onDrop事件未触发 [英] TableDnD onDrop event not firing

问题描述

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

I'm sure this is something very simple, it usually is.

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

I have the above code in action for tableDnD, the jQuery table sorting plugin. This is the exact code from the samples they provide, but it doesn't fire the onDrop event correctly when I drop an item in the table. I get no response in the console. The table does initialize, and the drag handle works properly, so I at least know that portion of the code is correct. The only thing I can't get to work is the onDrop command.

更新：

我更新了代码上面添加一个onDragStart和onDragClass，两者都工作正常，只有onDrop函数失败。

Update:
I updated the code above to add an onDragStart and onDragClass, both of which work perfect, it is only the onDrop function failing.

这是我的一般表格布局：

This is my general table layout:

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

推荐答案

我的第一个问题，我得到了答案。希望这可以帮助将来的某个人。

Well my first question and I got the answer to it. Hope this helps someone in the future.

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

The issue was with the actual ID's of my table rows. I actually had use of uuid which meant that my rows actually had an ID similar to "26b5122e-bbb8-11e1-9c53-d4856404b576". Apparently TableDnD does some sort of serializing of the data that broke my ID's apart and only grabbed the last group of numbers, which for most items were the same.

来自引起问题的jquery.tablednd.js文件就是这个（第380行）：

The line from the jquery.tablednd.js file that was causing the issue was this (around line 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。这就是结果。

I simply removed the serializer since I knew I wouldn't need it for my row IDs. Then I passed the row ID along myself. This was the result.

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

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

因此，如果您在行ID中使用破折号，请务必更改这使得onDrop正确点火。

So if you use dashes in your row IDs, make sure to change this to make the onDrop fire correctly.

这篇关于TableDnD onDrop事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！