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
解决方案
做起来并不难,但还没有方便的方法,我试了一下,让我们在沙箱中看看结果: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我们通知父组件发生了什么变化
这还不够好,特别是在取消拖动时。所以不要太依赖这些代码,根据这个思路自己找路
推荐阅读
- excel - 循环直到非空白列
- nix - Nix:如何用全局覆盖覆盖 stdenv.cc?
- javascript - Javascript document.write函数中是否有引号“和'的替代品
- angular - 在每一步使用 ngFor 的迭代根据索引
- reactjs - 受保护的路由在 API 响应到达之前重定向
- javascript - 如何在 vscode 扩展中打开本地(扩展包内)文件
- angular - Angular,我什么时候可以在 Angular 指令中使用模板引用变量?
- c# - 如何将 CSV 读入列表中的特定对象(包括整数、字符串、性别枚举和 DOB)
- jenkins - 如何在实例 EC2 中命名 Jenkins 从属
- python - 移位结果解释