# 一、效果展示排序： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf8e2f89c6b545db88e50172f05b7306~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=524&h=484&s=578686&e=gif&f=96&b=f9f7f3) 丝滑的Flip动画 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d72e62f3f6c4a108a5df9b1a575eaa1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=806&h=620&s=2166923&e=gif&f=86&b=9e8a80) 自定义列数（并且宽度会随着屏幕宽度自适应） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/777c189c9c444a35807383d3bf3e0ef9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1918&h=1028&s=1454038&e=gif&f=75&b=fbf9f7) 自定义拖拽区域：（扩展性高，可以全部可拖拽、自定义拖拽图标） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0535b04658b1435dbb26f72eea40a920~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600&h=454&s=479292&e=gif&f=99&b=9e8b80) # 二、主要思路 Tip：本代码的CSS使用Tailwindcss，如果没安装的可以自行安装这个库，也可以去问GPT，让它帮忙改成普通的CSS版本的代码 ## 1. 一些ts类型： ``` TypeScript import { CSSProperties, MutableRefObject, ReactNode } from "react" /**有孩子的，基础的组件props，包含className style children */ interface baseChildrenProps { /**组件最外层的className */ className?: string /**组件最外层的style */ style?: CSSProperties /**孩子 */ children?: ReactNode } /**ItemRender渲染函数的参数 */ type itemProps = { /**当前元素 */ item: T, /**当前索引 */ index: number, /**父元素宽度 */ width: number /**可拖拽的盒子，只有在这上面才能拖拽。自由放置位置。提供了一个默认的拖拽图标。可以作为包围盒，将某块内容作为拖拽区域 */ DragBox: (props: baseChildrenProps) => ReactNode } /**拖拽排序组件的props */ export interface DragSortProps { /**组件最外层的className */ className?: string /**组件最外层的style */ style?: CSSProperties /**列表，拖拽后会改变里面的顺序 */ list: T[] /**用作唯一key，在list的元素中的属性名，比如id。必须传递 */ keyName: keyof T /**一行个数，默认1 */ cols?: number /**元素间距，单位px，默认0 (因为一行默认1) */ marginX?: number /**当列表长度变化时，是否需要Flip动画，默认开启 (可能有点略微的动画bug) */ flipWithListChange?: boolean /**每个元素的渲染函数 */ ItemRender: (props: itemProps) => ReactNode /**拖拽结束事件，返回排序好的新数组，在里面自己调用setList */ afterDrag: (list: T[]) => any } ``` ## 2. 使用**事件委托** 监听所有子元素的拖拽开始、拖拽中、拖拽结束事件，减少绑定事件数量的同时，还能优化代码。 ``` TypeScript /**拖拽排序组件 */ const DragSort = function ({ list, ItemRender, afterDrag, keyName, cols = 1, marginX = 0, flipWithListChange = true, className, style, }: DragSortProps) { const listRef = useRef(null); /**记录当前正在拖拽哪个元素 */ const nowDragItem = useRef(); const itemWidth = useCalculativeWidth(listRef, marginX, cols);//使用计算宽度钩子，计算每个元素的宽度（代码后面会有） const [dragOpen, setDragOpen] = useState(false); //是否开启拖拽（鼠标进入指定区域开启） /**事件委托- 监听拖拽开始事件，添加样式 */ const onDragStart: DragEventHandler = (e) => { if (!listRef.current) return; e.stopPropagation(); //阻止冒泡 /**这是当前正在被拖拽的元素 */ const target = e.target as HTMLDivElement; //设置被拖拽元素“留在原地”的样式。为了防止设置正在拖拽的元素样式，所以用定时器，宏任务更晚执行 setTimeout(() => { target.classList.add(...movingClass); //设置正被拖动的元素样式 target.childNodes.forEach((k) => (k as HTMLDivElement).classList?.add(...opacityClass)); //把子元素都设置为透明，避免影响 }, 0); //记录当前拖拽的元素 nowDragItem.current = target; //设置鼠标样式 e.dataTransfer.effectAllowed = "move"; }; /**事件委托- 监听拖拽进入某个元素事件，在这里只是DOM变化，数据顺序没有变化 */ const onDragEnter: DragEventHandler = (e) => { e.preventDefault(); //阻止默认行为，默认是不允许元素拖动到人家身上的 if (!listRef.current || !nowDragItem.current) return; /**孩子数组，每次都会获取最新的 */ const children = [...listRef.current.children]; /**真正会被挪动的元素(当前正悬浮在哪个元素上面) */ //找到符合条件的父节点 const realTarget = findParent(e.target as Element, (now) => children.indexOf(now) !== -1); //边界判断 if (realTarget === listRef.current || realTarget === nowDragItem.current || !realTarget) { // console.log("拖到自身或者拖到外面"); return; } //拿到两个元素的索引，用来判断这俩元素应该怎么移动 /**被拖拽元素在孩子数组中的索引 */ const nowDragtItemIndex = children.indexOf(nowDragItem.current); /**被进入元素在孩子数组中的索引 */ const enterItemIndex = children.indexOf(realTarget); //当用户选中文字，然后去拖动这个文字时，就会触发（可以通过禁止选中文字来避免） if (enterItemIndex === -1 || nowDragtItemIndex === -1) { console.log("若第二个数为-1，说明拖动的不是元素，而是“文字”", enterItemIndex, nowDragtItemIndex); return; } if (nowDragtItemIndex < enterItemIndex) { // console.log("向下移动"); listRef.current.insertBefore(nowDragItem.current, realTarget.nextElementSibling); } else { // console.log("向上移动"); listRef.current.insertBefore(nowDragItem.current, realTarget); } }; /**事件委托- 监听拖拽结束事件，删除样式，设置当前列表 */ const onDragEnd: DragEventHandler = (e) => { if (!listRef.current) return; /**当前正在被拖拽的元素 */ const target = e.target as Element; target.classList.remove(...movingClass);//删除前面添加的被拖拽元素的样式，回归原样式 target.childNodes.forEach((k) => (k as Element).classList?.remove(...opacityClass));//删除所有子元素的透明样式 /**拿到当前DOM的id顺序信息 */ const ids = [...listRef.current.children].map((k) => String(k.id)); //根据id，判断到时候应该怎么排序 //把列表按照id排序 const newList = [...list].sort(function (a, b) { const aIndex = ids.indexOf(String(a[keyName])); const bIndex = ids.indexOf(String(b[keyName])); if (aIndex === -1 && bIndex === -1) return 0; else if (aIndex === -1) return 1; else if (bIndex === -1) return -1; else return aIndex - bIndex; }); afterDrag(newList);//触发外界传入的回调函数 setDragOpen(false);//拖拽完成后，再次禁止拖拽 }; /**拖拽按钮组件 */ //只有鼠标悬浮在这上面的时候，才开启拖拽，做到“指定区域拖拽” const DragBox = ({ className, style, children }: baseChildrenProps) => { return (

setDragOpen(true)} onMouseLeave={() => setDragOpen(false)} > {children || }

); }; return (

e.preventDefault()} //被拖动的对象被拖到其它容器时（因为默认不能拖到其它元素上） onDragEnd={onDragEnd} > {list.map((item, index) => { const key = item[keyName] as string; return (

{ItemRender({ item, index, width: itemWidth, DragBox })}

); })}

); }; ``` ## 3. 使用Flip做动画对于这种**移动位置**的动画，普通的CSS和JS动画已经无法满足了： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28c665bf40194548adc57e9f51762be5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=806&h=620&s=2166923&e=gif&f=86&b=9e8a80) 可以使用**Flip动画**来做：**FLIP是** **First、Last、Invert和 Play**四个单词首字母的缩写，意思就是，**记录一开始的位置、记录结束的位置、记录位置的变化、让元素开始动画** 主要的思路为：记录原位置、记录现位置、记录位移大小，最重要的点来了，使用CSS的 transform ，让元素在被改动位置的一瞬间， translate 定位到原本的位置上（通过我们前面计算的位移大小），然后给元素加上过渡效果，再让它慢慢回到原位即可。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38b370d3a48843bc931c610912329a85~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1440&h=408&s=59581&e=png&b=fefefe) 代码如下（没有第三方库，基本都是自己手写实现）这里还使用了JS提供的 [Web Animations API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API "Web Animations API")，具有极高的性能，不阻塞主线程。但是由于API没有提供动画完成的回调，故这里使用定时器做回调触发 ``` TypeScript /**位置的类型 */ interface position { x: number, y: number } /**Flip动画 */ export class Flip { /**dom元素 */ private dom: Element /**原位置 */ private firstPosition: position | null = null /**动画时间 */ private duration: number /**正在移动的动画会有一个专属的class类名，可以用于标识 */ static movingClass = "__flipMoving__" constructor(dom: Element, duration = 500) { this.dom = dom this.duration = duration } /**获得元素的当前位置信息 */ private getDomPosition(): position { const rect = this.dom.getBoundingClientRect() return { x: rect.left, y: rect.top } } /**给原始位置赋值 */ recordFirst(firstPosition?: position) { if (!firstPosition) firstPosition = this.getDomPosition() this.firstPosition = { ...firstPosition } } /**播放动画 */ play(callback?: () => any) { if (!this.firstPosition) { console.warn('请先记录原始位置'); return } const lastPositon = this.getDomPosition() const dif: position = { x: lastPositon.x - this.firstPosition.x, y: lastPositon.y - this.firstPosition.y, } // console.log(this, dif); if (!dif.x && !dif.y) return this.dom.classList.add(Flip.movingClass) this.dom.animate([ { transform: `translate(${-dif.x}px, ${-dif.y}px)` }, { transform: `translate(0px, 0px)` } ], { duration: this.duration }) setTimeout(() => { this.dom.classList.remove(Flip.movingClass) callback?.() }, this.duration); } } /**Flip多元素同时触发 */ export class FlipList { /**Flip列表 */ private flips: Flip[] /**正在移动的动画会有一个专属的class类名，可以用于标识 */ static movingClass = Flip.movingClass /**Flip多元素同时触发 - 构造函数 * @param domList 要监听的DOM列表 * @param duration 动画时长，默认500ms */ constructor(domList: Element[], duration?: number) { this.flips = domList.map((k) => new Flip(k, duration)) } /**记录全部初始位置 */ recordFirst() { this.flips.forEach((flip) => flip.recordFirst()) } /**播放全部动画 */ play(callback?: () => any) { this.flips.forEach((flip) => flip.play(callback)) } } ``` 然后在特定的地方插入代码，记录元素位置，做动画，插入了动画之后的代码，见下面的“完整代码”模块 # 三、完整代码 ## 1.类型定义 ``` TypeScript // type.ts import { CSSProperties, ReactNode } from "react" /**有孩子的，基础的组件props，包含className style children */ interface baseChildrenProps { /**组件最外层的className */ className?: string /**组件最外层的style */ style?: CSSProperties /**孩子 */ children?: ReactNode } /**ItemRender渲染函数的参数 */ type itemProps = { /**当前元素 */ item: T, /**当前索引 */ index: number, /**父元素宽度 */ width: number /**可拖拽的盒子，只有在这上面才能拖拽。自由放置位置。提供了一个默认的拖拽图标。可以作为包围盒，将某块内容作为拖拽区域 */ DragBox: (props: baseChildrenProps) => ReactNode } /**拖拽排序组件的props */ export interface DragSortProps { /**组件最外层的className */ className?: string /**组件最外层的style */ style?: CSSProperties /**列表，拖拽后会改变里面的顺序 */ list: T[] /**用作唯一key，在list的元素中的属性名，比如id。必须传递 */ keyName: keyof T /**一行个数，默认1 */ cols?: number /**元素间距，单位px，默认0 (因为一行默认1) */ marginX?: number /**当列表长度变化时，是否需要Flip动画，默认开启 (可能有点略微的动画bug) */ flipWithListChange?: boolean /**每个元素的渲染函数 */ ItemRender: (props: itemProps) => ReactNode /**拖拽结束事件，返回排序好的新数组，在里面自己调用setList */ afterDrag: (list: T[]) => any } ``` ## 2. 部分不方便使用Tailwindcss的CSS 由于这段背景设置为tailwindcss过于麻烦，所以单独提取出来 ``` TypeScript /* index.module.css */ /*拖拽时，留在原地的元素*/ .background { background: linear-gradient( 45deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 75%, transparent 75%, transparent ); background-size: 20px 20px; border-radius: 5px; } ``` ## 3. 计算每个子元素宽度的Hook 一个响应式计算宽度的hook，可以用于列表的多列布局 ``` TypeScript // hooks/alculativeWidth.ts import { RefObject, useEffect, useState } from "react"; /**根据父节点的ref和子元素的列数等数据，计算出子元素的宽度。用于响应式布局 * @param fatherRef 父节点的ref * @param marginX 子元素的水平间距 * @param cols 一行个数（一行有几列） * @param callback 根据浏览器宽度自动计算大小后的回调函数，参数是计算好的子元素宽度 * @returns 返回子元素宽度的响应式数据 */ const useCalculativeWidth = (fatherRef: RefObject, marginX: number, cols: number, callback?: (nowWidth: number) => void) => { const [itemWidth, setItemWidth] = useState(200); useEffect(() => { /**计算单个子元素宽度，根据list的宽度计算 */ const countWidth = () => { const width = fatherRef.current?.offsetWidth; if (width) { const _width = (width - marginX * (cols + 1)) / cols; setItemWidth(_width); callback && callback(_width) } }; countWidth(); //先执行一次，后续再监听绑定 window.addEventListener("resize", countWidth); return () => window.removeEventListener("resize", countWidth); }, [fatherRef, marginX, cols]); return itemWidth } export default useCalculativeWidth ``` ## 4. Flip动画实现 ``` TypeScript // lib/common/util/animation.ts /**位置的类型 */ interface position { x: number, y: number } /**Flip动画 */ export class Flip { /**dom元素 */ private dom: Element /**原位置 */ private firstPosition: position | null = null /**动画时间 */ private duration: number /**正在移动的动画会有一个专属的class类名，可以用于标识 */ static movingClass = "__flipMoving__" constructor(dom: Element, duration = 500) { this.dom = dom this.duration = duration } /**获得元素的当前位置信息 */ private getDomPosition(): position { const rect = this.dom.getBoundingClientRect() return { x: rect.left, y: rect.top } } /**给原始位置赋值 */ recordFirst(firstPosition?: position) { if (!firstPosition) firstPosition = this.getDomPosition() this.firstPosition = { ...firstPosition } } /**播放动画 */ play(callback?: () => any) { if (!this.firstPosition) { console.warn('请先记录原始位置'); return } const lastPositon = this.getDomPosition() const dif: position = { x: lastPositon.x - this.firstPosition.x, y: lastPositon.y - this.firstPosition.y, } // console.log(this, dif); if (!dif.x && !dif.y) return this.dom.classList.add(Flip.movingClass) this.dom.animate([ { transform: `translate(${-dif.x}px, ${-dif.y}px)` }, { transform: `translate(0px, 0px)` } ], { duration: this.duration }) setTimeout(() => { this.dom.classList.remove(Flip.movingClass) callback?.() }, this.duration); } } /**Flip多元素同时触发 */ export class FlipList { /**Flip列表 */ private flips: Flip[] /**正在移动的动画会有一个专属的class类名，可以用于标识 */ static movingClass = Flip.movingClass /**Flip多元素同时触发 - 构造函数 * @param domList 要监听的DOM列表 * @param duration 动画时长，默认500ms */ constructor(domList: Element[], duration?: number) { this.flips = domList.map((k) => new Flip(k, duration)) } /**记录全部初始位置 */ recordFirst() { this.flips.forEach((flip) => flip.recordFirst()) } /**播放全部动画 */ play(callback?: () => any) { this.flips.forEach((flip) => flip.play(callback)) } } ``` ## 4. 一些工具函数 ``` TypeScript import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" /**Tailwindcss的合并css类名函数 * @param inputs 要合并的类名 * @returns */ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } /**查找符合条件的父节点 * @param node 当前节点。如果当前节点就符合条件，就会返回当前节点 * @param target 参数是当前找到的节点，返回一个布尔值，为true代表找到想要的父节点 * @returns 没找到则返回null，找到了返回Element */ export function findParent(node: Element, target: (nowNode: Element) => boolean) { while (node && !target(node)) { if (node.parentElement) { node = node.parentElement; } else { return null; } } return node; } ``` ## 5. 完整组件代码 ``` TypeScript import { DragEventHandler, useEffect, useRef, useState } from "react"; import { DragSortProps } from "./type"; import useCalculativeWidth from "@/hooks/calculativeWidth"; import { cn, findParent } from "@/lib/util"; import style from "./index.module.css"; import { DragIcon } from "../../UI/MyIcon"; //这个图标可以自己找喜欢的 import { FlipList } from "@/lib/common/util/animation"; /**拖拽时，留在原位置的元素的样式 */ const movingClass = [style.background]; //使用数组是为了方便以后添加其他类名 /**拖拽时，留在原位置的子元素的样式 */ const opacityClass = ["opacity-0"]; //使用数组是为了方便以后添加其他类名 /**拖拽排序组件 */ const DragSort = function ({ list, ItemRender, afterDrag, keyName, cols = 1, marginX = 0, flipWithListChange = true, className, style, }: DragSortProps) { const listRef = useRef(null); /**记录当前正在拖拽哪个元素 */ const nowDragItem = useRef(); const itemWidth = useCalculativeWidth(listRef, marginX, cols); /**存储flipList动画实例 */ const flipListRef = useRef(); const [dragOpen, setDragOpen] = useState(false); //是否开启拖拽（鼠标进入指定区域开启） /**创建记录新的动画记录，并立即记录当前位置 */ const createNewFlipList = (exceptTarget?: Element) => { if (!listRef.current) return; //记录动画 const listenChildren = [...listRef.current.children].filter((k) => k !== exceptTarget); //除了指定元素，其它的都动画 flipListRef.current = new FlipList(listenChildren, 300); flipListRef.current.recordFirst(); }; //下面这两个是用于，当列表变化时，进行动画 useEffect(() => { if (!flipWithListChange) return; createNewFlipList(); }, [list]); useEffect(() => { if (!flipWithListChange) return; createNewFlipList(); return () => { flipListRef.current?.play(() => flipListRef.current?.recordFirst()); }; }, [list.length]); /**事件委托- 监听拖拽开始事件，添加样式 */ const onDragStart: DragEventHandler = (e) => { if (!listRef.current) return; e.stopPropagation(); //阻止冒泡 /**这是当前正在被拖拽的元素 */ const target = e.target as HTMLDivElement; //设置被拖拽元素“留在原地”的样式。为了防止设置正在拖拽的元素样式，所以用定时器，宏任务更晚执行 setTimeout(() => { target.classList.add(...movingClass); //设置正被拖动的元素样式 target.childNodes.forEach((k) => (k as HTMLDivElement).classList?.add(...opacityClass)); //把子元素都设置为透明，避免影响 }, 0); //记录元素的位置，用于Flip动画 createNewFlipList(target); //记录当前拖拽的元素 nowDragItem.current = target; //设置鼠标样式 e.dataTransfer.effectAllowed = "move"; }; /**事件委托- 监听拖拽进入某个元素事件，在这里只是DOM变化，数据顺序没有变化 */ const onDragEnter: DragEventHandler = (e) => { e.preventDefault(); //阻止默认行为，默认是不允许元素拖动到人家身上的 if (!listRef.current || !nowDragItem.current) return; /**孩子数组，每次都会获取最新的 */ const children = [...listRef.current.children]; /**真正会被挪动的元素(当前正悬浮在哪个元素上面) */ //找到符合条件的父节点 const realTarget = findParent(e.target as Element, (now) => children.indexOf(now) !== -1); //边界判断 if (realTarget === listRef.current || realTarget === nowDragItem.current || !realTarget) { // console.log("拖到自身或者拖到外面"); return; } if (realTarget.className.includes(FlipList.movingClass)) { // console.log("这是正在动画的元素，跳过"); return; } //拿到两个元素的索引，用来判断这俩元素应该怎么移动 /**被拖拽元素在孩子数组中的索引 */ const nowDragtItemIndex = children.indexOf(nowDragItem.current); /**被进入元素在孩子数组中的索引 */ const enterItemIndex = children.indexOf(realTarget); //当用户选中文字，然后去拖动这个文字时，就会触发（可以通过禁止选中文字来避免） if (enterItemIndex === -1 || nowDragtItemIndex === -1) { console.log("若第二个数为-1，说明拖动的不是元素，而是“文字”", enterItemIndex, nowDragtItemIndex); return; } //Flip动画 - 记录原始位置 flipListRef.current?.recordFirst(); if (nowDragtItemIndex < enterItemIndex) { // console.log("向下移动"); listRef.current.insertBefore(nowDragItem.current, realTarget.nextElementSibling); } else { // console.log("向上移动"); listRef.current.insertBefore(nowDragItem.current, realTarget); } //Flip动画 - 播放 flipListRef.current?.play(); }; /**事件委托- 监听拖拽结束事件，删除样式，设置当前列表 */ const onDragEnd: DragEventHandler = (e) => { if (!listRef.current) return; /**当前正在被拖拽的元素 */ const target = e.target as Element; target.classList.remove(...movingClass); //删除前面添加的被拖拽元素的样式，回归原样式 target.childNodes.forEach((k) => (k as Element).classList?.remove(...opacityClass)); //删除所有子元素的透明样式 /**拿到当前DOM的id顺序信息 */ const ids = [...listRef.current.children].map((k) => String(k.id)); //根据id，判断到时候应该怎么排序 //把列表按照id排序 const newList = [...list].sort(function (a, b) { const aIndex = ids.indexOf(String(a[keyName])); const bIndex = ids.indexOf(String(b[keyName])); if (aIndex === -1 && bIndex === -1) return 0; else if (aIndex === -1) return 1; else if (bIndex === -1) return -1; else return aIndex - bIndex; }); afterDrag(newList); //触发外界传入的回调函数 setDragOpen(false); //拖拽完成后，再次禁止拖拽 }; /**拖拽按钮组件 */ //只有鼠标悬浮在这上面的时候，才开启拖拽，做到“指定区域拖拽” const DragBox = ({ className, style, children }: baseChildrenProps) => { return (

setDragOpen(true)} onMouseLeave={() => setDragOpen(false)} > {children || }

); }; return (

{ItemRender({ item, index, width: itemWidth, DragBox })}

); })}

); }; export default DragSort; ``` ## 6. 效果图的测试用例一开始展示的效果图的实现代码 ``` TypeScript "use client"; import { useState } from "react"; import DragSort from "@/components/base/tool/DragSort"; import { Button, InputNumber } from "antd"; export default function page() { interface item { id: number; } const [list, setList] = useState([]); //当前列表 const [cols, setCols] = useState(1); //一行个数 /**创建一个新的元素 */ const createNewItem = () => { setList((old) => old.concat([ { id: Date.now(), }, ]) ); }; return (

一行个数： setCols(v!)} /> setList(list)} ItemRender={({ item, index, DragBox }) => { return (

序号：{index}，

ID：{item.id}

{/* 自定义拖拽位置 */}

); }} />

); } ``` # 四、结语哪里做的不好、有bug等，欢迎指出