• React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域

    一、效果展示

    排序：

    丝滑的Flip动画 

     自定义列数 （并且宽度会随着屏幕宽度自适应）

    自定义拖拽区域：（扩展性高，可以全部可拖拽、自定义拖拽图标）

    二、主要思路

    Tip： 本代码的CSS使用Tailwindcss， 如果没安装的可以自行安装这个库，也可以去问GPT，让它帮忙改成普通的CSS版本的代码

    1. 一些ts类型：

    1. import { CSSProperties, MutableRefObject, ReactNode } from "react"
    2. /**有孩子的，基础的组件props，包含className style children */
    3. interface baseChildrenProps {
    4.     /**组件最外层的className */
    5.     className?: string
    6.     /**组件最外层的style */
    7.     style?: CSSProperties
    8.     /**孩子 */
    9.     children?: ReactNode
    10. }
    11. /**ItemRender渲染函数的参数 */
    12. type itemProps = {
    13.     /**当前元素 */
    14.     item: T,
    15.     /**当前索引 */
    16.     index: number,
    17.     /**父元素宽度 */
    18.     width: number
    19.     /**可拖拽的盒子，只有在这上面才能拖拽。自由放置位置。提供了一个默认的拖拽图标。可以作为包围盒，将某块内容作为拖拽区域 */
    20.     DragBox: (props: baseChildrenProps) => ReactNode
    21. }
    22. /**拖拽排序组件的props */
    23. export interface DragSortProps {
    24.     /**组件最外层的className */
    25.     className?: string
    26.     /**组件最外层的style */
    27.     style?: CSSProperties
    28.     /**列表，拖拽后会改变里面的顺序 */
    29.     list: T[]
    30.     /**用作唯一key，在list的元素中的属性名，比如id。必须传递 */
    31.     keyName: keyof T
    32.     /**一行个数，默认1 */
    33.     cols?: number
    34.     /**元素间距，单位px，默认0 (因为一行默认1) */
    35.     marginX?: number
    36.     /**当列表长度变化时，是否需要Flip动画，默认开启 (可能有点略微的动画bug) */
    37.     flipWithListChange?: boolean
    38.     /**每个元素的渲染函数 */
    39.     ItemRender: (props: itemProps) => ReactNode
    40.     /**拖拽结束事件，返回排序好的新数组，在里面自己调用setList */
    41.     afterDrag: (list: T[]) => any
    42. }

    2. 使用事件委托

    监听所有子元素的拖拽开始、拖拽中、拖拽结束事件，减少绑定事件数量的同时，还能优化代码。

    1. /**拖拽排序组件 */
    2. const DragSort = function ({
    3.   list,
    4.   ItemRender,
    5.   afterDrag,
    6.   keyName,
    7.   cols = 1,
    8.   marginX = 0,
    9.   flipWithListChange = true,
    10.   className,
    11.   style,
    12. }: DragSortProps) {
    13.   const listRef = useRef<HTMLDivElement>(null);
    14.   /**记录当前正在拖拽哪个元素 */
    15.   const nowDragItem = useRef<HTMLDivElement>();
    16.   const itemWidth = useCalculativeWidth(listRef, marginX, cols);//使用计算宽度钩子，计算每个元素的宽度 （代码后面会有）
    17.   const [dragOpen, setDragOpen] = useState(false); //是否开启拖拽 （鼠标进入指定区域开启）
    18.  
    19.  
    20.   /**事件委托- 监听 拖拽开始 事件，添加样式 */
    21.   const onDragStart: DragEventHandler<HTMLDivElement> = (e) => {
    22.     if (!listRef.current) return;
    23.     e.stopPropagation(); //阻止冒泡
    24.  
    25.     /**这是当前正在被拖拽的元素 */
    26.     const target = e.target as HTMLDivElement;
    27.  
    28.     //设置被拖拽元素“留在原地”的样式。为了防止设置正在拖拽的元素样式，所以用定时器，宏任务更晚执行
    29.     setTimeout(() => {
    30.       target.classList.add(...movingClass); //设置正被拖动的元素样式
    31.       target.childNodes.forEach((k) => (k as HTMLDivElement).classList?.add(...opacityClass)); //把子元素都设置为透明，避免影响
    32.     }, 0);
    33.  
    34.     //记录当前拖拽的元素
    35.     nowDragItem.current = target;
    36.  
    37.     //设置鼠标样式
    38.     e.dataTransfer.effectAllowed = "move";
    39.   };
    40.  
    41.   /**事件委托- 监听 拖拽进入某个元素 事件，在这里只是DOM变化，数据顺序没有变化 */
    42.   const onDragEnter: DragEventHandler<HTMLDivElement> = (e) => {
    43.     e.preventDefault(); //阻止默认行为，默认是不允许元素拖动到人家身上的
    44.     if (!listRef.current || !nowDragItem.current) return;
    45.  
    46.     /**孩子数组，每次都会获取最新的 */
    47.     const children = [...listRef.current.children];
    48.     /**真正会被挪动的元素(当前正悬浮在哪个元素上面) */ //找到符合条件的父节点
    49.     const realTarget = findParent(e.target as Element, (now) => children.indexOf(now) !== -1);
    50.  
    51.     //边界判断
    52.     if (realTarget === listRef.current || realTarget === nowDragItem.current || !realTarget) {
    53.       // console.log("拖到自身或者拖到外面");
    54.       return;
    55.     }
    56.  
    57.     //拿到两个元素的索引，用来判断这俩元素应该怎么移动
    58.     /**被拖拽元素在孩子数组中的索引 */
    59.     const nowDragtItemIndex = children.indexOf(nowDragItem.current);
    60.     /**被进入元素在孩子数组中的索引 */
    61.     const enterItemIndex = children.indexOf(realTarget);
    62.  
    63.     //当用户选中文字，然后去拖动这个文字时，就会触发 （可以通过禁止选中文字来避免）
    64.     if (enterItemIndex === -1 || nowDragtItemIndex === -1) {
    65.       console.log("若第二个数为-1，说明拖动的不是元素，而是“文字”", enterItemIndex, nowDragtItemIndex);
    66.       return;
    67.     }
    68.  
    69.     if (nowDragtItemIndex < enterItemIndex) {
    70.       // console.log("向下移动");
    71.       listRef.current.insertBefore(nowDragItem.current, realTarget.nextElementSibling);
    72.     } else {
    73.       // console.log("向上移动");
    74.       listRef.current.insertBefore(nowDragItem.current, realTarget);
    75.     }
    76.   };
    77.  
    78.   /**事件委托- 监听 拖拽结束 事件，删除样式，设置当前列表 */
    79.   const onDragEnd: DragEventHandler<HTMLDivElement> = (e) => {
    80.     if (!listRef.current) return;
    81.     /**当前正在被拖拽的元素 */
    82.     const target = e.target as Element;
    83.     
    84.     target.classList.remove(...movingClass);//删除前面添加的 被拖拽元素的样式，回归原样式
    85.     target.childNodes.forEach((k) => (k as Element).classList?.remove(...opacityClass));//删除所有子元素的透明样式
    86.  
    87.  
    88.     /**拿到当前DOM的id顺序信息 */
    89.     const ids = [...listRef.current.children].map((k) => String(k.id)); //根据id，判断到时候应该怎么排序
    90.  
    91.     //把列表按照id排序
    92.     const newList = [...list].sort(function (a, b) {
    93.       const aIndex = ids.indexOf(String(a[keyName]));
    94.       const bIndex = ids.indexOf(String(b[keyName]));
    95.       if (aIndex === -1 && bIndex === -1) return 0;
    96.       else if (aIndex === -1) return 1;
    97.       else if (bIndex === -1) return -1;
    98.       else return aIndex - bIndex;
    99.     });
    100.  
    101.     
    102.     afterDrag(newList);//触发外界传入的回调函数
    103.  
    104.     setDragOpen(false);//拖拽完成后，再次禁止拖拽 
    105.   };
    106.  
    107.   /**拖拽按钮组件 */  //只有鼠标悬浮在这上面的时候，才开启拖拽，做到“指定区域拖拽”
    108.   const DragBox = ({ className, style, children }: baseChildrenProps) => {
    109.     return (
    110.       <div
    111.         style={{ ...style }}
    112.         className={cn("hover:cursor-grabbing", className)}
    113.         onMouseEnter={() => setDragOpen(true)}
    114.         onMouseLeave={() => setDragOpen(false)}
    115.       >
    116.         {children || <DragIcon size={20} color="#666666" />}
    117.       div>
    118.     );
    119.   };
    120.  
    121.   return (
    122.     <div
    123.       className={cn(cols === 1 ? "" : "flex flex-wrap", className)}
    124.       style={style}
    125.       ref={listRef}
    126.       onDragStart={onDragStart}
    127.       onDragEnter={onDragEnter}
    128.       onDragOver={(e) => e.preventDefault()} //被拖动的对象被拖到其它容器时（因为默认不能拖到其它元素上）
    129.       onDragEnd={onDragEnd}
    130.     >
    131.       {list.map((item, index) => {
    132.         const key = item[keyName] as string;
    133.         return (
    134.           <div id={key} key={key} style={{ width: itemWidth, margin: `4px ${marginX / 2}px` }} draggable={dragOpen} className="my-1">
    135.             {ItemRender({ item, index, width: itemWidth, DragBox })}
    136.           div>
    137.         );
    138.       })}
    139.     div>
    140.   );
    141. };

    3. 使用Flip做动画

    对于这种移动位置的动画，普通的CSS和JS动画已经无法满足了：

            可以使用Flip动画来做：FLIP是 First、Last、Invert和 Play四个单词首字母的缩写， 意思就是，记录一开始的位置、记录结束的位置、记录位置的变化、让元素开始动画 

            主要的思路为： 记录原位置、记录现位置、记录位移大小，最重要的点来了， 使用CSS的 transform ，让元素在被改动位置的一瞬间， translate 定位到原本的位置上（通过我们前面计算的位移大小）， 然后给元素加上 过渡 效果，再让它慢慢回到原位即可。

            代码如下 （没有第三方库，基本都是自己手写实现）

            这里还使用了JS提供的 Web Animations API，具有极高的性能，不阻塞主线程。

            但是由于API没有提供动画完成的回调，故这里使用定时器做回调触发

    1. /**位置的类型 */
    2. interface position {
    3.     x: number,
    4.     y: number
    5. }
    6.  
    7. /**Flip动画 */
    8. export class Flip {
    9.     /**dom元素 */
    10.     private dom: Element
    11.     /**原位置 */
    12.     private firstPosition: position | null = null
    13.     /**动画时间 */
    14.     private duration: number
    15.     /**正在移动的动画会有一个专属的class类名，可以用于标识 */
    16.     static movingClass = "__flipMoving__"
    17.     constructor(dom: Element, duration = 500) {
    18.         this.dom = dom
    19.         this.duration = duration
    20.     }
    21.     /**获得元素的当前位置信息 */
    22.     private getDomPosition(): position {
    23.         const rect = this.dom.getBoundingClientRect()
    24.         return {
    25.             x: rect.left,
    26.             y: rect.top
    27.         }
    28.     }
    29.     /**给原始位置赋值 */
    30.     recordFirst(firstPosition?: position) {
    31.         if (!firstPosition) firstPosition = this.getDomPosition()
    32.         this.firstPosition = { ...firstPosition }
    33.     }
    34.     /**播放动画 */
    35.     play(callback?: () => any) {
    36.         if (!this.firstPosition) {
    37.             console.warn('请先记录原始位置');
    38.             return
    39.         }
    40.         const lastPositon = this.getDomPosition()
    41.         const dif: position = {
    42.             x: lastPositon.x - this.firstPosition.x,
    43.             y: lastPositon.y - this.firstPosition.y,
    44.         }
    45.         // console.log(this, dif);
    46.         if (!dif.x && !dif.y) return
    47.         this.dom.classList.add(Flip.movingClass)
    48.         this.dom.animate([
    49.             { transform: `translate(${-dif.x}px, ${-dif.y}px)` },
    50.             { transform: `translate(0px, 0px)` }
    51.         ], { duration: this.duration })
    52.         setTimeout(() => {
    53.             this.dom.classList.remove(Flip.movingClass)
    54.             callback?.()
    55.         }, this.duration);
    56.     }
    57. }
    58. /**Flip多元素同时触发 */
    59. export class FlipList {
    60.     /**Flip列表 */
    61.     private flips: Flip[]
    62.     /**正在移动的动画会有一个专属的class类名，可以用于标识 */
    63.     static movingClass = Flip.movingClass
    64.     /**Flip多元素同时触发 - 构造函数
    65.      * @param domList 要监听的DOM列表
    66.      * @param duration 动画时长，默认500ms
    67.      */
    68.     constructor(domList: Element[], duration?: number) {
    69.         this.flips = domList.map((k) => new Flip(k, duration))
    70.     }
    71.     /**记录全部初始位置 */
    72.     recordFirst() {
    73.         this.flips.forEach((flip) => flip.recordFirst())
    74.     }
    75.     /**播放全部动画 */
    76.     play(callback?: () => any) {
    77.         this.flips.forEach((flip) => flip.play(callback))
    78.     }
    79. }

    然后在特定的地方插入代码，记录元素位置，做动画，插入了动画之后的代码，见下面的“完整代码”模块

    三、完整代码

    1.类型定义

    1. // type.ts
    2.  
    3. import { CSSProperties, ReactNode } from "react"
    4. /**有孩子的，基础的组件props，包含className style children */
    5. interface baseChildrenProps {
    6.     /**组件最外层的className */
    7.     className?: string
    8.     /**组件最外层的style */
    9.     style?: CSSProperties
    10.     /**孩子 */
    11.     children?: ReactNode
    12. }
    13. /**ItemRender渲染函数的参数 */
    14. type itemProps = {
    15.     /**当前元素 */
    16.     item: T,
    17.     /**当前索引 */
    18.     index: number,
    19.     /**父元素宽度 */
    20.     width: number
    21.     /**可拖拽的盒子，只有在这上面才能拖拽。自由放置位置。提供了一个默认的拖拽图标。可以作为包围盒，将某块内容作为拖拽区域 */
    22.     DragBox: (props: baseChildrenProps) => ReactNode
    23. }
    24. /**拖拽排序组件的props */
    25. export interface DragSortProps {
    26.     /**组件最外层的className */
    27.     className?: string
    28.     /**组件最外层的style */
    29.     style?: CSSProperties
    30.     /**列表，拖拽后会改变里面的顺序 */
    31.     list: T[]
    32.     /**用作唯一key，在list的元素中的属性名，比如id。必须传递 */
    33.     keyName: keyof T
    34.     /**一行个数，默认1 */
    35.     cols?: number
    36.     /**元素间距，单位px，默认0 (因为一行默认1) */
    37.     marginX?: number
    38.     /**当列表长度变化时，是否需要Flip动画，默认开启 (可能有点略微的动画bug) */
    39.     flipWithListChange?: boolean
    40.     /**每个元素的渲染函数 */
    41.     ItemRender: (props: itemProps) => ReactNode
    42.     /**拖拽结束事件，返回排序好的新数组，在里面自己调用setList */
    43.     afterDrag: (list: T[]) => any
    44. }

    2. 部分不方便使用Tailwindcss的CSS

    由于这段背景设置为tailwindcss过于麻烦，所以单独提取出来

    1. /* index.module.css */
    2.  
    3.  
    4. /*拖拽时，留在原地的元素*/
    5. .background {
    6.   background: linear-gradient(
    7.     45deg,
    8.     rgba(0, 0, 0, 0.3) 0,
    9.     rgba(0, 0, 0, 0.3) 25%,
    10.     transparent 25%,
    11.     transparent 50%,
    12.     rgba(0, 0, 0, 0.3) 50%,
    13.     rgba(0, 0, 0, 0.3) 75%,
    14.     transparent 75%,
    15.     transparent
    16.   );
    17.   background-size: 20px 20px;
    18.   border-radius: 5px;
    19. }

    3. 计算每个子元素宽度的Hook

    一个响应式计算宽度的hook，可以用于列表的多列布局

    1. // hooks/alculativeWidth.ts
    2.  
    3.  
    4. import { RefObject, useEffect, useState } from "react";
    5.  
    6. /**根据父节点的ref和子元素的列数等数据，计算出子元素的宽度。用于响应式布局
    7.  * @param fatherRef 父节点的ref
    8.  * @param marginX 子元素的水平间距
    9.  * @param cols 一行个数 （一行有几列）
    10.  * @param callback 根据浏览器宽度自动计算大小后的回调函数，参数是计算好的子元素宽度
    11.  * @returns 返回子元素宽度的响应式数据
    12.  */
    13. const useCalculativeWidth = (fatherRef: RefObject, marginX: number, cols: number, callback?: (nowWidth: number) => void) => {
    14.     const [itemWidth, setItemWidth] = useState(200);
    15.     useEffect(() => {
    16.         /**计算单个子元素宽度，根据list的宽度计算 */
    17.         const countWidth = () => {
    18.             const width = fatherRef.current?.offsetWidth;
    19.             if (width) {
    20.                 const _width = (width - marginX * (cols + 1)) / cols;
    21.                 setItemWidth(_width);
    22.                 callback && callback(_width)
    23.             }
    24.         };
    25.         countWidth(); //先执行一次，后续再监听绑定
    26.         window.addEventListener("resize", countWidth);
    27.         return () => window.removeEventListener("resize", countWidth);
    28.     }, [fatherRef, marginX, cols]);
    29.     return itemWidth
    30. }
    31. export default useCalculativeWidth

    4. Flip动画实现

    1. // lib/common/util/animation.ts
    2.  
    3.  
    4. /**位置的类型 */
    5. interface position {
    6.     x: number,
    7.     y: number
    8. }
    9.  
    10. /**Flip动画 */
    11. export class Flip {
    12.     /**dom元素 */
    13.     private dom: Element
    14.     /**原位置 */
    15.     private firstPosition: position | null = null
    16.     /**动画时间 */
    17.     private duration: number
    18.     /**正在移动的动画会有一个专属的class类名，可以用于标识 */
    19.     static movingClass = "__flipMoving__"
    20.     constructor(dom: Element, duration = 500) {
    21.         this.dom = dom
    22.         this.duration = duration
    23.     }
    24.     /**获得元素的当前位置信息 */
    25.     private getDomPosition(): position {
    26.         const rect = this.dom.getBoundingClientRect()
    27.         return {
    28.             x: rect.left,
    29.             y: rect.top
    30.         }
    31.     }
    32.     /**给原始位置赋值 */
    33.     recordFirst(firstPosition?: position) {
    34.         if (!firstPosition) firstPosition = this.getDomPosition()
    35.         this.firstPosition = { ...firstPosition }
    36.     }
    37.     /**播放动画 */
    38.     play(callback?: () => any) {
    39.         if (!this.firstPosition) {
    40.             console.warn('请先记录原始位置');
    41.             return
    42.         }
    43.         const lastPositon = this.getDomPosition()
    44.         const dif: position = {
    45.             x: lastPositon.x - this.firstPosition.x,
    46.             y: lastPositon.y - this.firstPosition.y,
    47.         }
    48.         // console.log(this, dif);
    49.         if (!dif.x && !dif.y) return
    50.         this.dom.classList.add(Flip.movingClass)
    51.         this.dom.animate([
    52.             { transform: `translate(${-dif.x}px, ${-dif.y}px)` },
    53.             { transform: `translate(0px, 0px)` }
    54.         ], { duration: this.duration })
    55.         setTimeout(() => {
    56.             this.dom.classList.remove(Flip.movingClass)
    57.             callback?.()
    58.         }, this.duration);
    59.     }
    60. }
    61. /**Flip多元素同时触发 */
    62. export class FlipList {
    63.     /**Flip列表 */
    64.     private flips: Flip[]
    65.     /**正在移动的动画会有一个专属的class类名，可以用于标识 */
    66.     static movingClass = Flip.movingClass
    67.     /**Flip多元素同时触发 - 构造函数
    68.      * @param domList 要监听的DOM列表
    69.      * @param duration 动画时长，默认500ms
    70.      */
    71.     constructor(domList: Element[], duration?: number) {
    72.         this.flips = domList.map((k) => new Flip(k, duration))
    73.     }
    74.     /**记录全部初始位置 */
    75.     recordFirst() {
    76.         this.flips.forEach((flip) => flip.recordFirst())
    77.     }
    78.     /**播放全部动画 */
    79.     play(callback?: () => any) {
    80.         this.flips.forEach((flip) => flip.play(callback))
    81.     }
    82. }

    4. 一些工具函数

    1. import { type ClassValue, clsx } from "clsx"
    2. import { twMerge } from "tailwind-merge"
    3.  
    4. /**Tailwindcss的 合并css类名 函数
    5.  * @param inputs 要合并的类名
    6.  * @returns 
    7.  */
    8. export function cn(...inputs: ClassValue[]) {
    9.     return twMerge(clsx(inputs))
    10. }
    11.  
    12.  
    13.  
    14. /**查找符合条件的父节点
    15.  * @param node 当前节点。如果当前节点就符合条件，就会返回当前节点
    16.  * @param target 参数是当前找到的节点，返回一个布尔值，为true代表找到想要的父节点
    17.  * @returns 没找到则返回null，找到了返回Element
    18.  */
    19. export function findParent(node: Element, target: (nowNode: Element) => boolean) {
    20.     while (node && !target(node)) {
    21.         if (node.parentElement) {
    22.             node = node.parentElement;
    23.         } else {
    24.             return null;
    25.         }
    26.     }
    27.     return node;
    28. }

    5. 完整组件代码

    1. import { DragEventHandler, useEffect,  useRef, useState } from "react";
    2. import { DragSortProps } from "./type";
    3. import useCalculativeWidth from "@/hooks/calculativeWidth"; 
    4. import { cn, findParent } from "@/lib/util"; 
    5. import style from "./index.module.css";
    6. import { DragIcon } from "../../UI/MyIcon"; //这个图标可以自己找喜欢的
    7. import { FlipList } from "@/lib/common/util/animation";
    8.  
    9. /**拖拽时，留在原位置的元素的样式 */
    10. const movingClass = [style.background]; //使用数组是为了方便以后添加其他类名
    11. /**拖拽时，留在原位置的子元素的样式 */
    12. const opacityClass = ["opacity-0"]; //使用数组是为了方便以后添加其他类名
    13.  
    14. /**拖拽排序组件 */
    15. const DragSort = function ({
    16.   list,
    17.   ItemRender,
    18.   afterDrag,
    19.   keyName,
    20.   cols = 1,
    21.   marginX = 0,
    22.   flipWithListChange = true,
    23.   className,
    24.   style,
    25. }: DragSortProps) {
    26.   const listRef = useRef<HTMLDivElement>(null);
    27.   /**记录当前正在拖拽哪个元素 */
    28.   const nowDragItem = useRef<HTMLDivElement>();
    29.   const itemWidth = useCalculativeWidth(listRef, marginX, cols);
    30.   /**存储flipList动画实例 */
    31.   const flipListRef = useRef<FlipList>();
    32.   const [dragOpen, setDragOpen] = useState(false); //是否开启拖拽 （鼠标进入指定区域开启）
    33.  
    34.   /**创建记录新的动画记录，并立即记录当前位置 */
    35.   const createNewFlipList = (exceptTarget?: Element) => {
    36.     if (!listRef.current) return;
    37.     //记录动画
    38.     const listenChildren = [...listRef.current.children].filter((k) => k !== exceptTarget); //除了指定元素，其它的都动画
    39.     flipListRef.current = new FlipList(listenChildren, 300);
    40.     flipListRef.current.recordFirst();
    41.   };
    42.  
    43.   //下面这两个是用于，当列表变化时，进行动画
    44.   useEffect(() => {
    45.     if (!flipWithListChange) return;
    46.     createNewFlipList();
    47.   }, [list]);
    48.   useEffect(() => {
    49.     if (!flipWithListChange) return;
    50.     createNewFlipList();
    51.     return () => {
    52.       flipListRef.current?.play(() => flipListRef.current?.recordFirst());
    53.     };
    54.   }, [list.length]);
    55.  
    56.   /**事件委托- 监听 拖拽开始 事件，添加样式 */
    57.   const onDragStart: DragEventHandler<HTMLDivElement> = (e) => {
    58.     if (!listRef.current) return;
    59.     e.stopPropagation(); //阻止冒泡
    60.  
    61.     /**这是当前正在被拖拽的元素 */
    62.     const target = e.target as HTMLDivElement;
    63.  
    64.     //设置被拖拽元素“留在原地”的样式。为了防止设置正在拖拽的元素样式，所以用定时器，宏任务更晚执行
    65.     setTimeout(() => {
    66.       target.classList.add(...movingClass); //设置正被拖动的元素样式
    67.       target.childNodes.forEach((k) => (k as HTMLDivElement).classList?.add(...opacityClass)); //把子元素都设置为透明，避免影响
    68.     }, 0);
    69.  
    70.     //记录元素的位置，用于Flip动画
    71.     createNewFlipList(target);
    72.  
    73.     //记录当前拖拽的元素
    74.     nowDragItem.current = target;
    75.  
    76.     //设置鼠标样式
    77.     e.dataTransfer.effectAllowed = "move";
    78.   };
    79.  
    80.   /**事件委托- 监听 拖拽进入某个元素 事件，在这里只是DOM变化，数据顺序没有变化 */
    81.   const onDragEnter: DragEventHandler<HTMLDivElement> = (e) => {
    82.     e.preventDefault(); //阻止默认行为，默认是不允许元素拖动到人家身上的
    83.     if (!listRef.current || !nowDragItem.current) return;
    84.  
    85.     /**孩子数组，每次都会获取最新的 */
    86.     const children = [...listRef.current.children];
    87.     /**真正会被挪动的元素(当前正悬浮在哪个元素上面) */ //找到符合条件的父节点
    88.     const realTarget = findParent(e.target as Element, (now) => children.indexOf(now) !== -1);
    89.  
    90.     //边界判断
    91.     if (realTarget === listRef.current || realTarget === nowDragItem.current || !realTarget) {
    92.       // console.log("拖到自身或者拖到外面");
    93.       return;
    94.     }
    95.     if (realTarget.className.includes(FlipList.movingClass)) {
    96.       // console.log("这是正在动画的元素，跳过");
    97.       return;
    98.     }
    99.  
    100.     //拿到两个元素的索引，用来判断这俩元素应该怎么移动
    101.     /**被拖拽元素在孩子数组中的索引 */
    102.     const nowDragtItemIndex = children.indexOf(nowDragItem.current);
    103.     /**被进入元素在孩子数组中的索引 */
    104.     const enterItemIndex = children.indexOf(realTarget);
    105.  
    106.     //当用户选中文字，然后去拖动这个文字时，就会触发 （可以通过禁止选中文字来避免）
    107.     if (enterItemIndex === -1 || nowDragtItemIndex === -1) {
    108.       console.log("若第二个数为-1，说明拖动的不是元素，而是“文字”", enterItemIndex, nowDragtItemIndex);
    109.       return;
    110.     }
    111.  
    112.     //Flip动画 - 记录原始位置
    113.     flipListRef.current?.recordFirst();
    114.  
    115.     if (nowDragtItemIndex < enterItemIndex) {
    116.       // console.log("向下移动");
    117.       listRef.current.insertBefore(nowDragItem.current, realTarget.nextElementSibling);
    118.     } else {
    119.       // console.log("向上移动");
    120.       listRef.current.insertBefore(nowDragItem.current, realTarget);
    121.     }
    122.  
    123.     //Flip动画 - 播放
    124.     flipListRef.current?.play();
    125.   };
    126.  
    127.   /**事件委托- 监听 拖拽结束 事件，删除样式，设置当前列表 */
    128.   const onDragEnd: DragEventHandler<HTMLDivElement> = (e) => {
    129.     if (!listRef.current) return;
    130.     /**当前正在被拖拽的元素 */
    131.     const target = e.target as Element;
    132.  
    133.     target.classList.remove(...movingClass); //删除前面添加的 被拖拽元素的样式，回归原样式
    134.     target.childNodes.forEach((k) => (k as Element).classList?.remove(...opacityClass)); //删除所有子元素的透明样式
    135.  
    136.     /**拿到当前DOM的id顺序信息 */
    137.     const ids = [...listRef.current.children].map((k) => String(k.id)); //根据id，判断到时候应该怎么排序
    138.  
    139.     //把列表按照id排序
    140.     const newList = [...list].sort(function (a, b) {
    141.       const aIndex = ids.indexOf(String(a[keyName]));
    142.       const bIndex = ids.indexOf(String(b[keyName]));
    143.       if (aIndex === -1 && bIndex === -1) return 0;
    144.       else if (aIndex === -1) return 1;
    145.       else if (bIndex === -1) return -1;
    146.       else return aIndex - bIndex;
    147.     });
    148.  
    149.     afterDrag(newList); //触发外界传入的回调函数
    150.  
    151.     setDragOpen(false); //拖拽完成后，再次禁止拖拽
    152.   };
    153.  
    154.   /**拖拽按钮组件 */ //只有鼠标悬浮在这上面的时候，才开启拖拽，做到“指定区域拖拽”
    155.   const DragBox = ({ className, style, children }: baseChildrenProps) => {
    156.     return (
    157.       <div
    158.         style={{ ...style }}
    159.         className={cn("hover:cursor-grabbing", className)}
    160.         onMouseEnter={() => setDragOpen(true)}
    161.         onMouseLeave={() => setDragOpen(false)}
    162.       >
    163.         {children || <DragIcon size={20} color="#666666" />}
    164.       div>
    165.     );
    166.   };
    167.  
    168.   return (
    169.     <div
    170.       className={cn(cols === 1 ? "" : "flex flex-wrap", className)}
    171.       style={style}
    172.       ref={listRef}
    173.       onDragStart={onDragStart}
    174.       onDragEnter={onDragEnter}
    175.       onDragOver={(e) => e.preventDefault()} //被拖动的对象被拖到其它容器时（因为默认不能拖到其它元素上）
    176.       onDragEnd={onDragEnd}
    177.     >
    178.       {list.map((item, index) => {
    179.         const key = item[keyName] as string;
    180.         return (
    181.           <div id={key} key={key} style={{ width: itemWidth, margin: `4px ${marginX / 2}px` }} draggable={dragOpen} className="my-1">
    182.             {ItemRender({ item, index, width: itemWidth, DragBox })}
    183.           div>
    184.         );
    185.       })}
    186.     div>
    187.   );
    188. };
    189. export default DragSort;

    6. 效果图的测试用例

    一开始展示的效果图的实现代码

    1. "use client";
    2. import { useState } from "react";
    3. import DragSort from "@/components/base/tool/DragSort";
    4. import { Button, InputNumber } from "antd";
    5. export default function page() {
    6.   interface item {
    7.     id: number;
    8.   }
    9.   const [list, setList] = useState([]); //当前列表
    10.   const [cols, setCols] = useState(1); //一行个数
    11.   /**创建一个新的元素 */
    12.   const createNewItem = () => {
    13.     setList((old) =>
    14.       old.concat([
    15.         {
    16.           id: Date.now(),
    17.         },
    18.       ])
    19.     );
    20.   };
    21.   return (
    22.     <div className="p-2 bg-[#a18c83] w-screen h-screen overflow-auto">
    23.       <Button type="primary" onClick={createNewItem}>
    24.         点我添加
    25.       Button>
    26.       一行个数： <InputNumber value={cols} min={1} onChange={(v) => setCols(v!)} />
    27.       <DragSort
    28.         list={list}
    29.         keyName={"id"}
    30.         cols={cols}
    31.         marginX={10}
    32.         afterDrag={(list) => setList(list)}
    33.         ItemRender={({ item, index, DragBox }) => {
    34.           return (
    35.             <div className="flex items-center border rounded-sm p-2 gap-1 bg-white">
    36.               <DragBox />
    37.               <div>序号：{index}，div>
    38.               <div>ID：{item.id}div>
    39.               {/* <DragBox className="bg-stone-400 text-white p-1">自定义拖拽位置DragBox> */}
    40.             div>
    41.           );
    42.         }}
    43.       />
    44.     div>
    45.   );
    46. }

    四、结语

            哪里做的不好、有bug等，欢迎指出

  • 相关阅读:
    深入理解HTTP的基础知识：请求-响应过程解析
    【JAVA面试】JAVA面试指南
    分布式数据库Schema 变更 in F1 & TiDB
    速卖通、阿里国际如何提升店铺流量？如何安全测评？
    MySQL中 any，some，all 的用法
    牛客算法题：B-装进肚子
    inux安装软件命令yum,apt-get
    一段JS去除畅言免费版广告
    Python数据结构（顺序表）
    uni-app 5小时快速入门 12 uni-app生命周期(下)
  • 原文地址：https://blog.csdn.net/m0_64130892/article/details/134230140