React-DnD 分页组件支持可拖拽排序实现

Hanyuxi
1,764 阅读2分钟

前言

小编最近在业务中碰到一个拖拽的需求：需要将分页组件进行拖拽并重新排序呈现，该业务背景是由于三消有很多关卡，配置好了当前关卡的数据，但是想在其他关卡中进行测试，这就导致需要在目标关卡进行重新配置，因此产生了这个拖拽并排序的需求。

由于项目之前用的是antd中的分页组件，执行拖拽需要对分页中的每个页面的item进行操作，因此需要重新封装一个分页组件，并使用React-DnD来实现拖拽

下面主要是通过一个Demo来演示分页组件且支持拖拽的功能

实现

drag.gif

安装依赖工具

image.png

  1. 安装react-dnd react-dnd 教程参考：react-dnd.github.io/react-dnd/a…
npm install react-dnd react-dnd-html5-backend

代码实现

1.index.js

DndProvider组件提供了react-dnd的功能，必须通过backend绑定HTML5Backend 绑定完成了就可以使用react-dnd的拖拽功能

<React.StrictMode>
    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
</React.StrictMode>

2.dragItem

dragItem 通过drag(drop(ref))能够实现在同一组件同时成为拖动源和放置目标（支持可排序），并在hover处理程序中重新排序数据。

image.png

3.pagination

  1. 通过useMemo钩子函数来计算展示的页码数组 通过left===1和right===total来判断是否呈现第一页和最后一页

image.png

  1. 将drop绑定到可放置目标的dom上

image.png

3.当拖拽完成执行放置方法 只有拖动源和放置目标不一致时才需要调用某方法

image.png

4.App.js

1.使用panigation组件

image.png

2.拖拽完成后数据源需要重新排序，通过拖动源和放置目标的位置来实现

image.png

总结

该功能的实现难度系数在需要自己写一个分页组件，只要写好了分页组件，再使用react-dnd就很容易实现了 如有需要，可以参考源码：github.com/hyx546/reac…

avatar
文章
阅读
粉丝