React實現一個拖拽排序組件的示例代碼

更新時間：2023年11月06日 09:46:35 作者：煎餅狗子

這篇文章主要給大家介紹了React實現一個拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下

一、效果展示

排序：

絲滑的Flip動畫

自定義列數（并且寬度會隨著屏幕寬度自適應）

自定義拖拽區(qū)域：（擴展性高，可以全部可拖拽、自定義拖拽圖標）

二、主要思路

Tip：本代碼的CSS使用Tailwindcss，如果沒安裝的可以自行安裝這個庫，也可以去問GPT，讓它幫忙改成普通的CSS版本的代碼

1. 一些ts類型：

import { CSSProperties, MutableRefObject, ReactNode } from "react"
/**有孩子的，基礎的組件props，包含className style children */
interface baseChildrenProps {
    /**組件最外層的className */
    className?: string
    /**組件最外層的style */
    style?: CSSProperties
    /**孩子 */
    children?: ReactNode
}
/**ItemRender渲染函數的參數 */
type itemProps<T> = {
    /**當前元素 */
    item: T,
    /**當前索引 */
    index: number,
    /**父元素寬度 */
    width: number
    /**可拖拽的盒子，只有在這上面才能拖拽。自由放置位置。提供了一個默認的拖拽圖標?？梢宰鳛榘鼑?，將某塊內容作為拖拽區(qū)域 */
    DragBox: (props: baseChildrenProps) => ReactNode
}
/**拖拽排序組件的props */
export interface DragSortProps<T> {
    /**組件最外層的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<T>) => ReactNode
    /**拖拽結束事件，返回排序好的新數組，在里面自己調用setList */
    afterDrag: (list: T[]) => any
}

2. 使用事件委托

監(jiān)聽所有子元素的拖拽開始、拖拽中、拖拽結束事件，減少綁定事件數量的同時，還能優(yōu)化代碼。

/**拖拽排序組件 */
const DragSort = function <T>({
  list,
  ItemRender,
  afterDrag,
  keyName,
  cols = 1,
  marginX = 0,
  flipWithListChange = true,
  className,
  style,
}: DragSortProps<T>) {
  const listRef = useRef<HTMLDivElement>(null);
  /**記錄當前正在拖拽哪個元素 */
  const nowDragItem = useRef<HTMLDivElement>();
  const itemWidth = useCalculativeWidth(listRef, marginX, cols);//使用計算寬度鉤子，計算每個元素的寬度 （代碼后面會有）
  const [dragOpen, setDragOpen] = useState(false); //是否開啟拖拽 （鼠標進入指定區(qū)域開啟）


  /**事件委托- 監(jiān)聽 拖拽開始 事件，添加樣式 */
  const onDragStart: DragEventHandler<HTMLDivElement> = (e) => {
    if (!listRef.current) return;
    e.stopPropagation(); //阻止冒泡

    /**這是當前正在被拖拽的元素 */
    const target = e.target as HTMLDivElement;

    //設置被拖拽元素“留在原地”的樣式。為了防止設置正在拖拽的元素樣式，所以用定時器，宏任務更晚執(zhí)行
    setTimeout(() => {
      target.classList.add(...movingClass); //設置正被拖動的元素樣式
      target.childNodes.forEach((k) => (k as HTMLDivElement).classList?.add(...opacityClass)); //把子元素都設置為透明，避免影響
    }, 0);

    //記錄當前拖拽的元素
    nowDragItem.current = target;

    //設置鼠標樣式
    e.dataTransfer.effectAllowed = "move";
  };

  /**事件委托- 監(jiān)聽 拖拽進入某個元素 事件，在這里只是DOM變化，數據順序沒有變化 */
  const onDragEnter: DragEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault(); //阻止默認行為，默認是不允許元素拖動到人家身上的
    if (!listRef.current || !nowDragItem.current) return;

    /**孩子數組，每次都會獲取最新的 */
    const children = [...listRef.current.children];
    /**真正會被挪動的元素(當前正懸浮在哪個元素上面) */ //找到符合條件的父節(jié)點
    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);
 
    //當用戶選中文字，然后去拖動這個文字時，就會觸發(fā) （可以通過禁止選中文字來避免）
    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);
    }
  };

  /**事件委托- 監(jiān)聽 拖拽結束 事件，刪除樣式，設置當前列表 */
  const onDragEnd: DragEventHandler<HTMLDivElement> = (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);//觸發(fā)外界傳入的回調函數

    setDragOpen(false);//拖拽完成后，再次禁止拖拽 
  };

  /**拖拽按鈕組件 */  //只有鼠標懸浮在這上面的時候，才開啟拖拽，做到“指定區(qū)域拖拽”
  const DragBox = ({ className, style, children }: baseChildrenProps) => {
    return (
      <div
        style={{ ...style }}
        className={cn("hover:cursor-grabbing", className)}
        onMouseEnter={() => setDragOpen(true)}
        onMouseLeave={() => setDragOpen(false)}
      >
        {children || <DragIcon size={20} color="#666666" />}
      </div>
    );
  };

  return (
    <div
      className={cn(cols === 1 ? "" : "flex flex-wrap", className)}
      style={style}
      ref={listRef}
      onDragStart={onDragStart}
      onDragEnter={onDragEnter}
      onDragOver={(e) => e.preventDefault()} //被拖動的對象被拖到其它容器時（因為默認不能拖到其它元素上）
      onDragEnd={onDragEnd}
    >
      {list.map((item, index) => {
        const key = item[keyName] as string;
        return (
          <div id={key} key={key} style={{ width: itemWidth, margin: `4px ${marginX / 2}px` }} draggable={dragOpen} className="my-1">
            {ItemRender({ item, index, width: itemWidth, DragBox })}
          </div>
        );
      })}
    </div>
  );
};

3. 使用Flip做動畫

對于這種移動位置的動畫，普通的CSS和JS動畫已經無法滿足了：

可以使用Flip動畫來做：FLIP是 First、Last、Invert和 Play四個單詞首字母的縮寫，意思就是，記錄一開始的位置、記錄結束的位置、記錄位置的變化、讓元素開始動畫

主要的思路為：記錄原位置、記錄現位置、記錄位移大小，最重要的點來了，使用CSS的 transform ，讓元素在被改動位置的一瞬間， translate 定位到原本的位置上（通過我們前面計算的位移大?。?，然后給元素加上過渡效果，再讓它慢慢回到原位即可。

代碼如下（沒有第三方庫，基本都是自己手寫實現）

這里還使用了JS提供的 Web Animations API，具有極高的性能，不阻塞主線程。

但是由于API沒有提供動畫完成的回調，故這里使用定時器做回調觸發(fā)

/**位置的類型 */
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多元素同時觸發(fā) */
export class FlipList {
    /**Flip列表 */
    private flips: Flip[]
    /**正在移動的動畫會有一個專屬的class類名，可以用于標識 */
    static movingClass = Flip.movingClass
    /**Flip多元素同時觸發(fā) - 構造函數
     * @param domList 要監(jiān)聽的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.類型定義

// type.ts

import { CSSProperties, ReactNode } from "react"
/**有孩子的，基礎的組件props，包含className style children */
interface baseChildrenProps {
    /**組件最外層的className */
    className?: string
    /**組件最外層的style */
    style?: CSSProperties
    /**孩子 */
    children?: ReactNode
}
/**ItemRender渲染函數的參數 */
type itemProps<T> = {
    /**當前元素 */
    item: T,
    /**當前索引 */
    index: number,
    /**父元素寬度 */
    width: number
    /**可拖拽的盒子，只有在這上面才能拖拽。自由放置位置。提供了一個默認的拖拽圖標。可以作為包圍盒，將某塊內容作為拖拽區(qū)域 */
    DragBox: (props: baseChildrenProps) => ReactNode
}
/**拖拽排序組件的props */
export interface DragSortProps<T> {
    /**組件最外層的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<T>) => ReactNode
    /**拖拽結束事件，返回排序好的新數組，在里面自己調用setList */
    afterDrag: (list: T[]) => any
}

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

由于這段背景設置為tailwindcss過于麻煩，所以單獨提取出來

/* 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，可以用于列表的多列布局

// hooks/alculativeWidth.ts


import { RefObject, useEffect, useState } from "react";

/**根據父節(jié)點的ref和子元素的列數等數據，計算出子元素的寬度。用于響應式布局
 * @param fatherRef 父節(jié)點的ref
 * @param marginX 子元素的水平間距
 * @param cols 一行個數 （一行有幾列）
 * @param callback 根據瀏覽器寬度自動計算大小后的回調函數，參數是計算好的子元素寬度
 * @returns 返回子元素寬度的響應式數據
 */
const useCalculativeWidth = (fatherRef: RefObject<HTMLDivElement>, 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(); //先執(zhí)行一次，后續(xù)再監(jiān)聽綁定
        window.addEventListener("resize", countWidth);
        return () => window.removeEventListener("resize", countWidth);
    }, [fatherRef, marginX, cols]);
    return itemWidth
}
export default useCalculativeWidth

4. Flip動畫實現

// 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多元素同時觸發(fā) */
export class FlipList {
    /**Flip列表 */
    private flips: Flip[]
    /**正在移動的動畫會有一個專屬的class類名，可以用于標識 */
    static movingClass = Flip.movingClass
    /**Flip多元素同時觸發(fā) - 構造函數
     * @param domList 要監(jiān)聽的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))
    }
}

5. 一些工具函數

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))
}



/**查找符合條件的父節(jié)點
 * @param node 當前節(jié)點。如果當前節(jié)點就符合條件，就會返回當前節(jié)點
 * @param target 參數是當前找到的節(jié)點，返回一個布爾值，為true代表找到想要的父節(jié)點
 * @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;
}

6. 完整組件代碼

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 <T>({
  list,
  ItemRender,
  afterDrag,
  keyName,
  cols = 1,
  marginX = 0,
  flipWithListChange = true,
  className,
  style,
}: DragSortProps<T>) {
  const listRef = useRef<HTMLDivElement>(null);
  /**記錄當前正在拖拽哪個元素 */
  const nowDragItem = useRef<HTMLDivElement>();
  const itemWidth = useCalculativeWidth(listRef, marginX, cols);
  /**存儲flipList動畫實例 */
  const flipListRef = useRef<FlipList>();
  const [dragOpen, setDragOpen] = useState(false); //是否開啟拖拽 （鼠標進入指定區(qū)域開啟）

  /**創(chuàng)建記錄新的動畫記錄，并立即記錄當前位置 */
  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]);

  /**事件委托- 監(jiān)聽 拖拽開始 事件，添加樣式 */
  const onDragStart: DragEventHandler<HTMLDivElement> = (e) => {
    if (!listRef.current) return;
    e.stopPropagation(); //阻止冒泡

    /**這是當前正在被拖拽的元素 */
    const target = e.target as HTMLDivElement;

    //設置被拖拽元素“留在原地”的樣式。為了防止設置正在拖拽的元素樣式，所以用定時器，宏任務更晚執(zhí)行
    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";
  };

  /**事件委托- 監(jiān)聽 拖拽進入某個元素 事件，在這里只是DOM變化，數據順序沒有變化 */
  const onDragEnter: DragEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault(); //阻止默認行為，默認是不允許元素拖動到人家身上的
    if (!listRef.current || !nowDragItem.current) return;

    /**孩子數組，每次都會獲取最新的 */
    const children = [...listRef.current.children];
    /**真正會被挪動的元素(當前正懸浮在哪個元素上面) */ //找到符合條件的父節(jié)點
    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);

    //當用戶選中文字，然后去拖動這個文字時，就會觸發(fā) （可以通過禁止選中文字來避免）
    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();
  };

  /**事件委托- 監(jiān)聽 拖拽結束 事件，刪除樣式，設置當前列表 */
  const onDragEnd: DragEventHandler<HTMLDivElement> = (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); //觸發(fā)外界傳入的回調函數

    setDragOpen(false); //拖拽完成后，再次禁止拖拽
  };

  /**拖拽按鈕組件 */ //只有鼠標懸浮在這上面的時候，才開啟拖拽，做到“指定區(qū)域拖拽”
  const DragBox = ({ className, style, children }: baseChildrenProps) => {
    return (
      <div
        style={{ ...style }}
        className={cn("hover:cursor-grabbing", className)}
        onMouseEnter={() => setDragOpen(true)}
        onMouseLeave={() => setDragOpen(false)}
      >
        {children || <DragIcon size={20} color="#666666" />}
      </div>
    );
  };

  return (
    <div
      className={cn(cols === 1 ? "" : "flex flex-wrap", className)}
      style={style}
      ref={listRef}
      onDragStart={onDragStart}
      onDragEnter={onDragEnter}
      onDragOver={(e) => e.preventDefault()} //被拖動的對象被拖到其它容器時（因為默認不能拖到其它元素上）
      onDragEnd={onDragEnd}
    >
      {list.map((item, index) => {
        const key = item[keyName] as string;
        return (
          <div id={key} key={key} style={{ width: itemWidth, margin: `4px ${marginX / 2}px` }} draggable={dragOpen} className="my-1">
            {ItemRender({ item, index, width: itemWidth, DragBox })}
          </div>
        );
      })}
    </div>
  );
};
export default DragSort;

7. 效果圖的測試用例

一開始展示的效果圖的實現代碼

"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<item[]>([]); //當前列表
  const [cols, setCols] = useState(1); //一行個數
  /**創(chuàng)建一個新的元素 */
  const createNewItem = () => {
    setList((old) =>
      old.concat([
        {
          id: Date.now(),
        },
      ])
    );
  };
  return (
    <div className="p-2 bg-[#a18c83] w-screen h-screen overflow-auto">
      <Button type="primary" onClick={createNewItem}>
        點我添加
      </Button>
      一行個數： <InputNumber value={cols} min={1} onChange={(v) => setCols(v!)} />
      <DragSort
        list={list}
        keyName={"id"}
        cols={cols}
        marginX={10}
        afterDrag={(list) => setList(list)}
        ItemRender={({ item, index, DragBox }) => {
          return (
            <div className="flex items-center border rounded-sm p-2 gap-1 bg-white">
              <DragBox />
              <div>序號：{index}，</div>
              <div>ID：{item.id}</div>
              {/* <DragBox className="bg-stone-400 text-white p-1">自定義拖拽位置</DragBox> */}
            </div>
          );
        }}
      />
    </div>
  );
}

四、結語

以上就是React實現一個拖拽排序組件的示例代碼的詳細內容，更多關于React拖拽排序組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

如何在React項目中優(yōu)雅的使用對話框
在項目中,對話框和確認框是使用頻率很高的組件,下面這篇文章主要給大家介紹了關于如何在React項目中優(yōu)雅的使用對話框的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
react-player實現視頻播放與自定義進度條效果
本篇文章通過完整的代碼給大家介紹了react-player實現視頻播放與自定義進度條效果，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2022-01-01
前端開發(fā)使用Ant Design項目評價
這篇文章主要為大家介紹了前端開發(fā)使用Ant Design項目評價，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
如何將你的AngularJS1.x應用遷移至React的方法
本篇文章主要介紹了如何將你的AngularJS1.x應用遷移至React的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
React視頻播放控制組件Video Controls的實現
本文主要介紹了React視頻播放控制組件Video Controls的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2025-02-02
React 組件中的 bind(this)示例代碼
這篇文章主要介紹了 React 組件中的 bind(this) ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
React中useCallback useMemo到底該怎么用
在React函數組件中，當組件中的props發(fā)生變化時，默認情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender
2023-02-02
詳解React-Router中Url參數改變頁面不刷新的解決辦法
這篇文章主要介紹了詳解React-Router中Url參數改變頁面不刷新的解決辦法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
react MPA 多頁配置詳解
這篇文章主要介紹了react MPA 多頁配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
使用react+redux實現彈出框案例
這篇文章主要為大家詳細介紹了使用react+redux實現彈出框案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

React實現一個拖拽排序組件的示例代碼

目錄

一、效果展示

二、主要思路

1. 一些ts類型：

2. 使用事件委托

3. 使用Flip做動畫

三、完整代碼

1.類型定義

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

3. 計算每個子元素寬度的Hook

4. Flip動畫實現

5. 一些工具函數

6. 完整組件代碼

7. 效果圖的測試用例

四、結語

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

React實現一個拖拽排序組件的示例代碼

目錄

一、效果展示

二、主要思路

1. 一些ts類型：

2. 使用事件委托

3. 使用Flip做動畫

三、完整代碼

1.類型定義

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

3. 計算每個子元素寬度的Hook

4. Flip動畫實現

5. 一些工具函數

6. 完整組件代碼

7. 效果圖的測試用例

四、結語

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

一、效果展示

三、完整代碼

四、結語