重新排序表列，通过拖放进行反应

Question

我有一个html表，应该可以重新排序行和列。

重新排序行非常straight forward但重新排序列很难，因为列的单元格不共享相同的父元素。

<table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

如何使用react实现列拖动？

Answer 1

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

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

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

然后在拖动列时 - 只需更改列var。

中的索引

Answer 2

我认为你必须实现一个自定义DragLayer才能让它做你想做的事情 - 这样，你就可以完全控制拖动预览的样子，并且可以使它渲染出一列，而不仅仅是从基本预览中获得的单个单元格。

然后你可以这样做，以便如果一个列被拖动它的所有单元格都显示：none或者什么东西它们会消失，然后你的自定义DragLayer会向用户显示在新表格中呈现的列作为预览

他有一个非常好的教程，介绍如何在这里编写自定义DragLayer：http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html，您可以随时寻求帮助。