如何在我的React Table-ReactJS中同时使用列和行的拖放功能

Question

我已经在React Table中创建了一个表。我想在列和行上都添加拖放功能。我该怎么办？

这是我的CodeSandbox示例-https://codesandbox.io/s/2wp7jk23kr

这里我有一个用于拖放行的代码沙箱-https://codesandbox.io/s/1844xzjvp7

这里我有一个用于拖放列的代码沙箱-https://codesandbox.io/s/5vxlnjrw1n

作为React的初学者，我无法集成这三个沙箱。有人可以在CodeSandbox上提供一个很好的示例，说明如何在列和行上添加拖放功能吗？

请使用我的React Table数据列-https://codesandbox.io/s/2wp7jk23kr

Answer 1

制作起来并不难，但仍然没有方便的方法，我尝试了一下，让我们在沙箱中查看结果：https://codesandbox.io/s/quizzical-leakey-o5h8z

然后让我们看看Table.js中发生了什么

1。开始拖动时，您不知道前进的方向，所以我只隐藏了代码片段（将其设置为空div）

2。当您第一次将其拖动到另一个单元格中时，我已经知道方向，然后将方向锁定在dragState.direction内部

3。当您将其拖到单元格中时（包括在步骤2中的第一次），您需要显示更改的数据，例如rows = offsetIndex(dragState.row, dragState.dropIndex, rows)，请注意它取决于dragState.direction而有所不同

4。用opacity: ....突出显示要拖动的行/列>

5。最后在dragEnd上，我们通知父组件已更改的内容

还不够好，特别是当拖动结束时。因此，不要过多地依赖这些代码，请根据此想法找到自己的方式]