javascript - 通过拖放对表列进行重新排序

Question

我有一个应该能够重新排序行和列的 html 表。

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

<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

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

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

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

Answer 2

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

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

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

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