标签：useDragList list React Hook dragList dragItemClassName const

Hook定义 useDragList

import { useState } from "react";

interface useDragPropsType {
    list: Array<any>,
    dragItemClassName: string
}

const checkValidDragItem = (e: React.DragEvent, className: string) => (e.target as HTMLLIElement).className === className

const useDragList = ({ list, dragItemClassName }: useDragPropsType) => {
    const [dragList, setDragList] = useState(list)
    const [curDragIndex, setCurDragIndex] = useState<number>(-1)

    const handleDragStart = (e: React.DragEvent, index: number) => {
        if (!checkValidDragItem(e, dragItemClassName)) return
        setCurDragIndex(index)
    }

    // 需要在这里阻止默认事件，否则handleDrop不触发
    const handleDragOver = (e: React.DragEvent) => {
        if (!checkValidDragItem(e, dragItemClassName)) return
        e.preventDefault()
    }
    const handleDrop = (e: React.DragEvent, index: number) => {
        if (!checkValidDragItem(e, dragItemClassName)) return
        [dragList[index], dragList[curDragIndex]] = [dragList[curDragIndex], dragList[index]] // swap 
        setDragList([...dragList])
    }


    return {
        list:dragList,
        handleDragStart,
        handleDragOver,
        handleDrop
    }
}

export default useDragList

Hook使用

import useDragList from "../hooks/useDragList"
import './DragDemo.css'

interface dragItemType {
    id: number | string
}

const dragListData: Array<dragItemType> = Array(4).fill('').map((v, i) => ({
    id: i
}))

const dragItemClass = "dragItem"

const DragDemo: React.FC = () => {

    const {
        list: dragList,
        handleDragStart,
        handleDragOver,
        handleDrop
    } = useDragList({ list: dragListData, dragItemClassName: dragItemClass })

    return (
        <ul className="dragWrapper">
            {
                dragList.map((v, i) => (
                    <li className={dragItemClass}
                        draggable={true}
                        key={v.id}
                        onDragStart={(e) => handleDragStart(e, i)}
                        onDragOver={(e) => handleDragOver(e)}
                        onDrop={(e) => handleDrop(e, i)}
                    >{v.id}</li>
                ))
            }
        </ul>
    )
}

export default DragDemo

标签：useDragList,list,React,Hook,dragList,dragItemClassName,const
来源： https://www.cnblogs.com/ltfxy/p/16386815.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。