基于react-dnd实现拖拽排序
学习目标
- 理解并掌握 基于react-dnd实现拖拽排序 的核心原理与工程实践
总结
我们学了 react-dnd 并用它实现了拖拽排序。
react-dnd 主要就是 useDrag、useDrop、useDragLayout 这 3 个 API。
useDrag 是给元素添加拖拽，指定 item、type、collect 等参数。
useDrop 是给元素添加 drop，指定 accepet、drop、hover、collect 等参数。
useDragLayout 是自定义预览，可以通过 monitor 拿到拖拽的实时位置。
此外，最外层还要加上 DndProvider，用来组件之间传递数据。
其实各种拖拽功能的实现思路比较固定：什么元素可以拖拽，什么元素可以 drop，drop 或者 hover 的时候修改数据触发重新渲染就好了。
比如拖拽排序就是 hover 的时候互换两个 index 的对应的数据，然后 setState 触发渲染。
用 react-dnd，我们能实现各种基于拖拽的功能。