React 鼠标事件 之 div 拖动

===需要关注的三个方法===

• onMouseDown 按下
• onMouseMove 拖动
• onMouseUp 抬起

实现步骤

设置window 按下 抬起事件

    useEffect(() => {
        window.onmousedown = () => mouseDown()
        window.onmouseup = e => mouseUp(e)
    }, [])

设置div标签的拖动事件

<div id={styles.div_super_box}>
        <div onClick={() => setIsSel(false)} style={{ width: 1280, height: 720, backgroundColor: 'yellow', overflow: 'hidden' }}>
            <div id={isSel ? styles.div_box_click : styles.div_box} onClick={(e) => {
                setIsSel(true);
                e.stopPropagation();
            }}
                style={{ transform: `translateX(${translateX}px) translateY(${translateY}px)` }}
                onMouseMove={e => onMove(e)} >
                <img style={{ width: '100%', height: '100%' }} alt={''} src={max_bg_3}></img>
            </div>
        </div>
    </div>

完整代码

import styles from './test.module.css'
import React, { useEffect, useState } from 'react'
import max_bg_3 from '../../assets/images/max_bg_3.png'
const Test = () => {
    //是否可以移动
    const [isMoving, setIsMoving] = useState(false)
    const [lastX, setLastX] = useState(0);
    const [lastY, setLastY] = useState(0);
    const [translateX, setTranslateX] = useState(0);
    const [translateY, setTranslateY] = useState(0);
    const [isSel, setIsSel] = useState(true)
    useEffect(() => {
        window.onmousedown = () => mouseDown()
        window.onmouseup = e => mouseUp(e)
    }, [])

    //鼠标按下事件
    const mouseDown = () => {
        setIsMoving(true)
    }

    //鼠标移动事件
    const onMove = (e) => isMoving && isSel && move(e)

    const move = (e) => {
        e.stopPropagation();
        e.preventDefault();
        if (lastX && lastY) {
            let dx = e.clientX - lastX
            let dy = e.clientY - lastY
            setTranslateX(translateX + dx);
            setTranslateY(translateY + dy);
        }
        setLastX(e.clientX)
        setLastY(e.clientY)

    }

    const mouseUp = (e) => {
        if (e != null) {

        }
        setIsMoving(false)
    }

    return (<div id={styles.div_super_box}>
        <div onClick={() => setIsSel(false)} style={{ width: 1280, height: 720, backgroundColor: 'yellow', overflow: 'hidden' }}>
            <div id={isSel ? styles.div_box_click : styles.div_box} onClick={(e) => {
                setIsSel(true);
                e.stopPropagation();
            }}
                style={{ transform: `translateX(${translateX}px) translateY(${translateY}px)` }}
                onMouseMove={e => onMove(e)} >
                <img style={{ width: '100%', height: '100%' }} alt={''} src={max_bg_3}></img>
            </div>
        </div>
    </div>)
}

export default Test