Javascript 使用react通过拖放对表列重新排序

我有一个html表，它应该能够对行和列重新排序

对行进行重新排序是非常困难的，但对列进行重新排序是非常困难的，因为列的单元格不共享相同的父元素

第1列
第2列
第1列
第2列

---

如何使用react实现列拖动？

您应该在数据和视图之间添加额外的抽象层，在其中使用列索引。例如：

var data : [["a","b","c"],["a2","b2","c2"]];
var columns = [2,1,0];

function getData(row, col) {
   return data[row][columns[col]];
}

---

然后，当您拖动列时-您只需更改列变量内的索引。

我认为您必须实现一个自定义DragLayer，以便让它执行您希望它执行的操作-这样，您就可以完全控制拖动预览的外观，并且可以使它渲染出一列，而不仅仅是从基本预览中获得的单个单元格

然后，您可以将其设置为，如果正在拖动某个列，则其所有单元格都将显示：无或其他使其消失的内容，然后自定义DragLayer将在新表中呈现的列作为预览显示给用户

---

他有一个关于如何编写自定义DragLayer的非常好的教程，您可以在这里学习帮助。

谢谢您的回答。但我的问题是，我不能同时拖动多个元素，因为它们不共享一个公共根节点。您的答案针对性能问题。我的问题是更加面向DOM/React。您找到解决方案了吗？我遇到了完全相同的问题。这可能会奏效。还没有。我用了一种更简单的方法。