时间戳

首页 > 解决方案 > 如何在我的 React 表中使用列和行的拖放功能 - ReactJS

javascript - 如何在我的 React 表中使用列和行的拖放功能 - ReactJS

问题描述

我在 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

标签： javascriptreactjsreact-table

解决方案

做起来并不难，但还没有方便的方法，我试了一下，让我们在沙箱中看看结果：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我们通知父组件发生了什么变化

这还不够好，特别是在取消拖动时。所以不要太依赖这些代码，根据这个思路自己找路

推荐阅读