使用HTML5拖放API创建可排序表行

我已经广泛地搜索了一个示例，其中有人使用HTML5拖放API来启用表行（tr元素）的重新排序，但似乎没有。我遇到过一些定位鼠标光标位置的示例，但当然这些示例没有利用新的API事件，这些事件看起来非常方便

到目前为止，我所见过的所有帖子都是使用有序和无序列表以及列表元素的示例。我自己的实验以类似于列表中使用的方式应用dragstart、dragover和drop处理程序，但没有产生任何效果

---

是否有人能够将此应用于表元素，他们是否有一个工作示例？我知道jQuery sortable插件，但我对原生JavaScript解决方案特别感兴趣。

我花了好几天的时间，试图在本教程的基础上“从头开始”为React JS实现HTML5拖放：它似乎工作得相当好

以下是我的结论：

不幸的是，它需要jQuery（尽管不是jqueryui）来实现几个我自己编写的函数，即“最近的（）”和“偏移量（）”。我的希望是，这仍然可以让您更接近一个工作拖放重新排序表。这并不复杂，但有很多陷阱

您所需要做的就是编写自己的偏移量和最接近删除jQuery的实现。React this.state.data文件可以替换为DOM函数，以便在拖放时重新定位拖动的行

老实说，如果你能侥幸逃脱的话，jQueryUISortable就像是对表的一种魅力，只是做了一些很小的调整。HTML5拖放是一个可怕的API，兼容性较差。以下是我的工作jQuery UI解决方案，我放弃了它，转而选择了React：

jQuery（函数（$）{
$（'table.sortable'）。可排序({
项目：“.item”，
轴：“y”，
停止：功能（事件、用户界面）{
ui.item.effect（“突出显示”）；
},
更新：功能（事件、用户界面）{
//在此处更新服务器
}
});
});

标题1
标题2
第1单元
第2单元
第1单元
第2单元
第1单元
第2单元
提问者明确表示“不是jquery”。当然，我的解决方案是链接到React教程，并解释如何修复它以使用表，我已经更改了措辞以澄清。我得到的印象是，真正的问题是让表行拖放，没有关于这方面的好教程。如果您使用无序列表教程，它可能不起作用。我将尝试使其通用。我喜欢这种方法，但如果表行大小是动态的，该怎么办？这不重要。它将只计算行高度。不过我不知道为什么JSFIDLE现在坏了（为了澄清jQuery为什么不是“本机JavaScript”，以及为什么它是不被允许的？我一直在努力让表行拖放，有很多东西使用jQuery更容易，即使您不使用jQuery UI:sortable（这对我可能添加的表行非常有效）。您需要在没有jQuery的情况下执行一些非常重要的DOM操作和遍历，并计算jQuery具有offset（）方法的每一行的确切位置（从文档顶部算起），否则您将编写自己的，请参阅：