这是我参与8月更文挑战的第9天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831) ## 前言 **拖放** 在实际业务中也是一个常见的功能，比如通过拖放列表元素进行排序、拖放元素在不同的容器中穿梭等。提到拖放，我们想到的是原生 DOM 事件的操作、元素移动时位置的计算以及动画等等，第一反应必然是找第三方拖放库 ‘帮助’ 我们完成需求咯。然而，第三方库虽然功能强大，但很多功能你未必需要，杀鸡焉用牛刀呢？所以我们可以根据实际场景的复杂度来选择实现方式，**第三方库的强大功能** or **自己实现最精炼的代码**。 ## 自己动手（代码不过百）实现一个列表拖放排序的功能，选中元素后，元素实时跟随鼠标移动，并且列表实时更新，如下图： ![dragdrop.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec629348c7ef4e259a6370ab6f543550~tplv-k3u1fbpfcp-watermark.image) ### 准备工作在 React 中实现拖放的技术要点： - 熟悉鼠标事件：`MouseDown`、`MouseUp`、`MouseMove` - 如何触发拖放开始（`MouseDown`）和判断拖放结束（`MouseUp`） - 如何实现拖放元素位置的移动，可以用两种方案 - 原元素跟着鼠标移动 - 创建一个新元素，作为原元素的影子，跟随鼠标移动 - 在组件中维护拖放的状态 ### 拖放开始在行元素上监听 Mousedown 事件，在 Mousedown 中初始化拖放状态： - dragging：true，拖放中 - startPageY，记录鼠标开始位置（纵向） - draggingIndex，选中元素的 index ```jsx

handleMounseDown(evt, i)} style={getDraggingStyle(i)}> {text}

``` ```jsx const handleMounseDown = (evt, index) => { setDragging(true); setStartPageY(evt.pageY); setDraggingIndex(index); }; ``` 样式上高亮拖放元素并且添加跟随鼠标效果，`translateX` 可以产生视觉上悬浮的效果，其中的 `offsetPageY` 的值将会在拖放过程中（`MouseMove`）计算得来： ```js const getDraggingStyle = (index) => { if (index !== draggingIndex) return {}; return { backgroundColor: 'lightsteelblue', transform: `translate(10px, ${offsetPageY}px)`, }; }; ``` ### 拖动中拖放中最关键的地方是：该在哪个节点上监听 `MouseMove` 事件？用户拖动时，鼠标是可以全页面跑的，如果在拖动元素（ `

` ）或者父元素（ `

); } ``` ```css .my-dnd-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0); } ``` 在 MouseMove 中，就是核心计算代码： - 计算偏移值（offset），`let offset = evt.pageY - startPageY;` - 当偏移值大于行高时，进行位置交换（`move`），并重新设置 `DraggingIndex`、`StartPageY`。 - 当偏移值小于行高时，操作同上 - 当偏移值没有超过行高，只需要设置 `offsetPageY` ```jsx const move = (arr, startIndex, toIndex) => { arr = arr.slice(); arr.splice(toIndex, 0, arr.splice(startIndex, 1)[0]); return arr; }; const handleMouseMove = (evt) => { let offset = evt.pageY - startPageY; if (offset > lineHeight && draggingIndex < list.length - 1) { // move down offset -= lineHeight; setList((pre) => move(pre, draggingIndex, draggingIndex + 1)); setDraggingIndex((pre) => pre + 1); setStartPageY((pre) => pre + lineHeight); } else if (offset < -lineHeight && draggingIndex > 0) { // move up offset += lineHeight; setList((pre) => move(pre, draggingIndex, draggingIndex - 1)); setDraggingIndex((pre) => pre - 1); setStartPageY((pre) => pre - lineHeight); } setOffsetPageY(offset); }; ``` ### 拖放结束设置 `dragging: false`，mask 层消失，` startPageY`、`draggingIndex` 初始化。 ```jsx const handleMouseUp = () => { setDragging(false); setStartPageY(0); setDraggingIndex(-1); }; ``` ### 完整代码完整代码可以看 [这里](https://github.com/pinkqq/react-antd/blob/main/src/pages/dragDrop/index.js) ## 拖放库 ![02.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6386ac6e030940bd96d0600799316843~tplv-k3u1fbpfcp-watermark.image) 找了一个在 React 最有名的拖放库，[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) 。 ### 安装 ``` # yarn yarn add react-beautiful-dnd # npm npm install react-beautiful-dnd --save ``` 使用 `react-beautiful-dnd`： ```js import { DragDropContext } from 'react-beautiful-dnd'; ``` ### 基础使用需要我们管理的部分： - 展示的数据 - 拖放结束后的动作（列表重排序） - 拖放时的变化（样式）其余的事情，`react-beautiful-dnd` 会办好的。 #### Dom 结构 ```jsx {(provided, snapshot) => { return (

{items.map((item, index) => ( {(provided, snapshot) => (

{item.content}

)} ))} {provided.placeholder}

); }} ``` #### 拖放结束，重新排序 ```jsx // 元素移动 const move = (arr, startIndex, toIndex) => { arr = arr.slice(); arr.splice(toIndex, 0, arr.splice(startIndex, 1)[0]); return arr; }; const onDragEnd = (result) => { if (!result.destination) { return; } setItems((pre) => move(pre, result.source.index, result.destination.index)); }; ``` #### 拖放中，样式管理 ```jsx // 设置样式 const getItemStyle = (isDragging, draggableStyle) => ({ userSelect: 'none', padding: grid * 2, margin: `0 0 ${grid}px 0`, // 拖拽的时候，item 背景变化 background: isDragging ? 'lightgreen' : '#ffffff', ...draggableStyle, }); const getListStyle = (isDraggingOver) => { return { // 拖拽的时候，list 背景变化 background: isDraggingOver ? 'darkgreen' : 'gray', padding: 8, width: 250, }; }; {(provided, snapshot) => { return (

{items.map((item, index) => ( {(provided, snapshot) => (

)} ))}

); }} ; ``` #### 效果预览 ![02.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62070e447aae44cfa0fa1043206beff8~tplv-k3u1fbpfcp-watermark.image) #### 完整代码完整代码可以看 [这里](https://github.com/pinkqq/react-antd/blob/main/src/pages/dnd/index.js) ### 进阶操作详细的 API 介绍和进阶操作（容器间的拖拽 & 容器可滚动），[看这边](https://juejin.cn/post/6993927186419810318)。 ## React 最佳实践 - [React 最佳实践：亲手码一个「可拖放列表」](https://juejin.cn/post/6994270743877926920) - [React 最佳实践：集成第三方库（D3.js）](https://juejin.cn/post/6993353424079323149) - [React 最佳实践：如何实现原生对话框（Portals）](https://juejin.cn/post/6993154734580301832) - [React 最佳实践：可拖拽侧边栏](https://juejin.cn/post/6992833914104463367) - [React 最佳实践：基于路由实现分步操作](https://juejin.cn/post/6992408029308289054/) - [React 最佳实践：处理多个数据源](https://juejin.cn/post/6992030786358607879) - [React 最佳实践：完成一个列表需求叭](https://juejin.cn/post/6991665381790203912) - [React 最佳实践：动态表单](https://juejin.cn/post/6991306379956846606)