--- highlight: a11y-dark theme: channing-cyan --- 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，[点击查看活动详情](https://juejin.cn/post/7080800226365145118)。 # 前言很久很久没有更文了，至于原因那就是忙于准备面试，目前阶段就是等待offer审批中，只是这个时间周期拖得有点长。本来打算不发offer就不更文，可是耗不起了，再耗下去四月的更文活动就要结束了，所以今天还是来写一篇文章参与参与，毕竟我还是乐于分享一些项目中遇到的技术问题啦（羊毛很香，薅羊毛也很爽）。今天来聊聊这段时间项目中遇到的问题：**前端项目中如何使用拖拽组件实现排序效果和移动效果**。 # 背景这段时间很充实既要准备面试相关的问题，平时工作还要接需求进行开发，毕竟站好最后一班岗是必备的职业素养。那这期间接了两个需求，分别是：**使用H5实现在CAD中对门窗表的编辑与配置**；**工程做法的编辑页面**。这两个需求都不简单，特别是工程做法编辑页面的一些交互功能很是恶心，尽管不好做但最后还是完美解决全优上线了。期间这两个需求都有一个排序功能，即需要手动拖拽进行排序；还有一个需求就是弹窗需要可拖动移动。这次就从这两个需求来介绍**react-sortable-hoc**和**react-draggable**这两个拖动组件在项目中是如何使用的。老规矩，先上效果图： ![gif2.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/806454ddf70043e0bb17f9823028c22a~tplv-k3u1fbpfcp-watermark.image?) ![gif1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a03df0d7874e4d9288e160918e88e4d9~tplv-k3u1fbpfcp-watermark.image?) ![gif3.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/219076e9b5ae4e93ae09ae40315451df~tplv-k3u1fbpfcp-watermark.image?) 图一、图二是拖动排序效果图，图三则是弹窗拖动效果图。 # 实现 [**react-sortable-hoc**](https://www.npmjs.com/package/react-sortable-hoc)组件用于实现拖动排序功能，[**react-draggable**](https://www.npmjs.com/package/react-draggable)组件则用于实现拖动弹窗移动功能。下面就跟着上面gif图顺序来介绍项目中怎么使用这两个组件实现功能的→ ## 一、react-sortable-hoc **react-sortable-hoc**是一组**react**高阶组件，可将任何列表转换为动画，可访问和触摸友好的可排序列表。它可以和现有组件集成，支持拖动手柄、自动滚动、锁定轴和操作事件等功能；有着流畅的动画效果；可水平、垂直拖动；适用于虚拟化库：如[**react-virtualized**](https://www.npmjs.com/package/react-virtualized)、[**react-tiny-virtual-list**](https://www.npmjs.com/package/react-tiny-virtual-list)、[**react-infinite**](https://www.npmjs.com/package/react-infinite)等。 ### 1.1 安装并引入安装： ``` $ npm install react-sortable-hoc 或者 yarn add react-sortable-hoc ``` 引入组件： ``` import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'; ``` 安装并引入好组件后，下面分别从两个场景介绍它的使用方法：**table表格场景**和**列表场景**。 ### 1.2 table表格场景 table场景使用的是[**Antd**](https://ant.design/components/table-cn/#API)的**Table**组件，利用`components`属性覆盖table的`body`元素，从而实现在拖动table行之后可以移动插入并进行排序。 #### 1.2.1 布局代码首先，根据引入组件可知： - `sortableContainer` 是所有可排序元素的容器 - `sortableElement` 是每个可渲染元素的容器 - `sortableHandle` 是定义拖拽手柄的容器接着，为这三个容器分别定义好各自的容器标签，如下： ``` // table容器 const TableContainer = SortableContainer(props => ); // table行 const TableItem = SortableElement(props => ); // 拖拽手柄 const DragHandle = SortableHandle(() => ( )); ``` 接着，给容器增加拖拽事件，给拖拽行打上标记，如下： ``` /** * 拖拽容器组件 * @param props * @constructor */ const DraggableContainer = props => ( ); /** * 标记拖拽行 * @param className * @param style * @param restProps * @constructor */ const DraggableBodyRow = ({ className, style, ...restProps }) => { const index = dataSource.findIndex(x => x.PkId === restProps['data-row-key']); return ; }; ``` 最后，利用`components`属性覆盖table的`body`元素，如下： ``` ``` #### 1.2.2 逻辑代码这里将把拖动后如何提交数据给接口进行排序的思路，只是作为参考，实际工作中自行定义接口逻辑。思路如下：**当拖拽行时，将拖拽行拖拽到目标行的前面就设置位置为1标识目标前，反之则是目标后；通过这样传递给后端，后端人员根据位置信息来将前后数据进行自增1或者自减1，从而实现排序。** ``` /** * 拖拽结束 * @param oldIndex * @param newIndex 要插入的位置 */ const onSortEnd = ({oldIndex, newIndex}) => { if (oldIndex === newIndex) { return; } let position: number = 0; if (oldIndex > newIndex) { position = 1; // 目标前 }else { position = 0; // 目标后 } const dragItemPkid: string = dataSource[oldIndex].PkId; // 拖拽行 const dropItemPkid: string = dataSource[newIndex].PkId; // 目标行 // 参数（CAD后台人员定义的参数字段全是首字母大写的...） const params: any = { Num: position, OrderPkid: dragItemPkid, TargetPkid: dropItemPkid } console.log('params', params) // 调用接口 doorWindowHandler.updateDoorWindowSort(params).then(res => { if (res.IsSucess) { // 排序成功后刷新表格数据即可 queryReportList(); } else { message.error(res.Message); } }) } /** * 构造表格列 */ const getColumns = (): any[] => { return [ { className: 'drag-visible', title: '排序', align: 'center', width: 40, render: (text: any, record: any, index: number) => }, { title: '图纸', className: 'drag-visible', align: 'center', render: (text: any, record: any, index: number) => { // ... } }, { title: '楼层名', className: 'bit-edit-td drag-visible', render: (text: any, record: any, index: number) => { // ... } }, { title: '层数', className: 'bit-edit-td drag-visible', align: 'center', render: (text: any, record: any, index: number) => { // ... } }, { title: '文件更新时间', className: 'drag-visible', dataIndex: 'FileUpdateTimeStr', align: 'center', width: 140, render: (text: any, record: any, index: number) => { // ... } }, { title: '图纸门窗标注读取时间', className: 'drag-visible', dataIndex: 'ReadLableTimeStr', align: 'center', width: 140, }, // ... ] } ``` #### 1.2.3 样式代码为拖拽行添加如下样式，便于提升在拖动时的体验；其中为类名为`drag-visible`添加了显示样式，这是用`drag-visible`类名来控制拖拽行的某些列的值是否进行展示，上面代码体现了在拖动时只需要显示图纸、楼层名、层数、文件更新时间等列值。 ``` .custom-table-row-dragging { background: #fafafa; border: 1px solid #ccc; z-index: 11; } .custom-table-row-dragging td { padding: 0 15px; visibility: hidden; } .custom-table-row-dragging .drag-visible { visibility: visible; } ``` 完成上面的代码编写，即可实现在table表格中实现拖拽排序的功能效果，赶紧去试试→ ### 1.3 列表场景列表场景要考虑的因素就要比表格多一点，主要它没有集成在其他组件上使用，而是需要自己编码实现的。话不多说，下面就来实现列表场景需求→ 首先在引入组件时就需要再引入`arrayMove`这个方法，它主要用于将移动后的数据排列好后返回。 #### 1.3.1 引入组件 ``` import { SortableContainer, SortableElement, SortableHandle, arrayMove } from 'react-sortable-hoc'; ``` #### 1.3.2 布局代码同样，和table表格场景一样，需要先为其定义三个容器，但是不用像table那样再为其封装一层打标记和加事件，可直接在容器上使用事件，如下： ``` // 拖拽容器 const SortContainer = SortableContainer((props: any) =>

); // 拖拽手柄 const DragHandle = SortableHandle(() => ); ``` 可以看到，这里使用的是`ul`和`li`标签实现的，样式可以自行设置。接着，将需要排序的列表使用**SortContainer组件**和**SortItemLi组件**包裹即可，如下： ``` onSortEnd(values, v.lineId)} >
{ v.practiceIdNameList.map((item: any, index: number) => { rowSortLine === v.lineId ?

: null }
{item.practiceName}
) } { rowSortLine === v.lineId ?

:
rowSort(v)}>手动排序
}
``` 可以看到`SortContainer`组件内多了一个`axis`属性，其实它就是用于控制元素是水平拖动还是垂直拖动还是两者都行的属性；看文档可以知道它的默认值是`'y'`，表示垂直方向拖动；若要设置只能横向拖动就设置为`'x'`，水平垂直都能拖动就设置为`'xy'`；上面代码设置的就是水平垂直方向都能拖拽，主要考虑的是元素可能很多并且换行了，这样若只设置一个方向就不能实现需求，故设置为`'xy'`。如下图： ![gif4.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4339da58932f40fbb1dece2694702c86~tplv-k3u1fbpfcp-watermark.image?) 还有从两个场景都可以看到代码都设置了拖拽手柄，这是为了告诉用户元素是可拖动的，增加用户的使用体验。至于**react-sortable-hoc**的属性和方法可以详见[API文档](https://github.com/clauderic/react-sortable-hoc)。 #### 1.3.3 逻辑代码其实这里演示的逻辑代码是由于数据结构和接口逻辑使然，接口需要的参数是排序好的ID集合，故不能像table表格场景那样进行逻辑编写，再加上需求需要将顺序排好之后点击保存数据才进行变化，故逻辑和之前的场景有些许不同。先看这里的数据结构，如下图： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/451a453e1fd44273b007375d50c277c3~tplv-k3u1fbpfcp-watermark.image?) ``` /** * 表格行排序 * @param v */ const rowSort = (v: any) => { const {lineId} = v; setRowSortLine(lineId); } /** * 拖拽结束 * @param values * @param lineId */ const onSortEnd = (values: any, lineId: string) => { const {oldIndex, newIndex} = values; let newData: any[] = [...dataSource]; let temp: any = dataSource.filter(v => lineId === v.lineId)[0]; let data: any[] = [...temp.practiceIdNameList]; practiceIdNameListOrigin.current = JSON.parse(JSON.stringify(temp.practiceIdNameList)); let list: any = []; if (oldIndex !== newIndex) { list = arrayMove(data, oldIndex, newIndex); } else { list = data; } newData.forEach(v => { if (lineId === v.lineId) { v.practiceIdNameList = list } }); let arr: any[] = getGroupData(newData); setDataSource(arr); } /** * 排序提交 * @param lineId */ const rowSortSubmit = (lineId: string) => { let temp: any = dataSource.filter(v => lineId === v.lineId)[0]; let ids: string[] = temp.practiceIdNameList.map(v => v.practiceId); request( '/project/v2/practice/sort', {practiceIdList: ids}, {baseURL: globalProjectMethodURL} ).then(res => { setRowSortLine(''); queryTableList(typeId); }) } /** * 取消排序 * @param v */ const cancelSort = (v: any) => { const {lineId} = v; let newData: any[] = [...dataSource]; newData.forEach(v => { if (lineId === v.lineId) { v.practiceIdNameList = ObjTest.isNotEmptyArray(practiceIdNameListOrigin.current) ? practiceIdNameListOrigin.current : v.practiceIdNameList } }); let arr: any[] = getGroupData(newData); setDataSource(arr); setRowSortLine(''); } ``` 从代码可以看到，在拖拽结束`onSortEnd()`的方法中，根据判断元素的序号是否改变然后使用`arrayMove()`返回排序好的数组，然后重新给表格数据赋值，从而看到已排序好的元素显示；若序号没有则保持原来的数组即可。然后在取消排序时，将`practiceIdNameListOrigin.current`保存的值还原即可保持原有数据的显示效果。 ## 二、react-draggable **react-draggable**经过几年的发展，已经是一个相对比较稳定的库了。在所有**react**拖拽库里**react-draggable**是把功能性和易用性平衡得最好的拖拽库，它可以满足多数情况下的拖拽需求。 ### 2.1 安装并引用 ``` $ npm install react-draggable 或者 yarn add react-draggable ``` 引入组件： ``` import Draggable from 'react-draggable'; ``` ### 2.2 使用这里的使用方法是介绍其在[**Antd**](https://ant.design/components/modal-cn/)的**Modal**组件中如何使用，毕竟这个场景还是挺常见的，有些小伙伴在使用了**Modal**组件之后需求需要拖动，不想重写代码就只想在已有代码上去做更改的心态也是常见的，毕竟我也是如此，不想重复造轮子，能做更改即做，实在无法才去重写。弹窗能移动的需求开始我也觉得要到重写的地步了，但是深入查看文档之后，让我发现可以解决的办法。那就是**Modal**组件提供了一个`modalRender`属性，它用于自定义渲染对话框。即可以自定义渲染，而不影响已有的代码结构，故就有了下面的代码演示，如下： ``` {modalForm.resetFields()}} maskClosable={false} modalRender={(node) => ( // 就是这里！！！加上这个代码你的弹窗就能拖动了
{node}
)} >
``` 至此，**react-sortable-hoc**和**react-draggable**组件在实际项目中的使用方法就介绍完了，文章并没有展开延伸介绍组件的每一个属性和方法，因为那样就会很长影响阅读，这里只讲了其在我们项目中使用的一些属性和方法，其他属性和方法还得结合实际需求去参看**API文档**进行使用，看了这篇文章相信一定能举一反三，后续的相关属性和方法也能掌握。最后，xdm看文至此，点个赞👍再走哦，3Q^_^ # 往期精彩文章 - [聊聊前端如何实现复制粘贴功能及Github上提请代码PR的具体流程？](https://juejin.cn/post/7073481273183846436) - [（建议收藏）快来看看最值得拥有且最详细的Git使用教程](https://juejin.cn/post/7068951510410854437) - [（建议收藏）快来看看我们团队是如何制定前端开发规范的](https://juejin.cn/post/7068160968877932574) - [（建议收藏）前端开发中常见的浏览器兼容性问题及解决方案大汇总](https://juejin.cn/post/7067808335034220574) - [如何在前端项目中对页面元素进行放大缩小操作？](https://juejin.cn/post/7066976488830009351) - [聊聊如何在React项目中使用Antd的Table组件实现Echarts的热力图效果？](https://juejin.cn/post/7063853665039155236) - [如何在Vue或React项目中引入外部字体并使用？](https://juejin.cn/post/7063111159372578829) - [如何在React项目中使用高德地图插件并封装弹窗组件呢？](https://juejin.cn/post/7056293254584598558) - [数据可视化-如何在React项目中使用Echarts插件并封装图表组件？](https://juejin.cn/post/7056292895715754015) - [快来看看我是如何更改Antd中DatePicker周选择器默认设置的？](https://juejin.cn/post/7056209566123425800) - [如何封装Vue水印组件和 React中如何使用水印组件？](https://juejin.cn/post/7057333991531085855) - [最强富文本编辑器？TinyMCE系列文章【3】](https://juejin.cn/post/7055249174631022623) - [最强富文本编辑器？TinyMCE系列文章【2】](https://juejin.cn/post/7055534376011956254) - [最强富文本编辑器？TinyMCE系列文章【1】](https://juejin.cn/post/7055164243624067080) - [在React项目中实现仿饿了么Checkbox多选按钮样式的效果组件](https://juejin.cn/post/7054806424853381128) - [2022第一次更文：前端项目实战中的3种Progress进度条效果](https://juejin.cn/post/7054356434904940558) - [2022年前端技术趋势：你不进来看看，怎么赚它一个小目标？](https://juejin.cn/post/7051514605671186445) - [假如古代有程序员写总结，大概就是这样吧 | 2021年终总结](https://juejin.cn/post/7041835076660756488) # 后语伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。