javascript - 如何在我的 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我们通知父组件发生了什么变化

这还不够好，特别是当拖动被取消时。所以不要太依赖这些代码，根据这个思路找到适合自己的方法