通过拖放对表列进行重新排序答案

【问题标题】：Reordering table columns with react via drag and drop通过拖放对表列进行重新排序
【发布时间】：2016-11-21 21:38:04
【问题描述】：

我有一个 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 实现列拖动？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：