React.js拖拽元素来回跳动问题求助（附完整代码）

你的拖拽元素出现跳动的核心原因有两个：

• 每次mousemove时动态获取offsetLeft/offsetTop，元素移动后这些值会实时变化，导致位置计算出现偏差
• 容器的position属性设置错误（用了字符串引号），导致绝对定位的元素无法正确参考父容器

下面是具体修复步骤和修改后的代码：

修复步骤 #

• 修正容器的position属性：移除App.css中.container的position值引号，改为position: relative;
• 在mousedown时记录鼠标相对于拖拽元素的偏移量，而非每次移动时重新计算元素偏移
• 将拖拽元素的position设为absolute，确保相对于父容器定位
• 将mousemove和mouseup事件绑定到document上，避免鼠标移出元素后拖拽中断

修改后的App.css #

#root{
  margin:auto;
}

.container{
  border:1px solid black;
  height:50vh;
  width:50vw;
  position: relative; /* 去掉引号，正确设置相对定位 */
}

修改后的User.jsx #

import { useState, useEffect, useRef } from 'react'

function User(props) {
    const [user, setUser] = useState({});
    const [isMousePressed, setIsMousePressed] = useState(false);
    const refToUser = useRef();
    // 存储鼠标相对于元素的偏移量
    const mouseOffset = useRef({ x: 0, y: 0 });

    function moveUser(e) {
        if (!isMousePressed || !refToUser.current) return;
        
        // 用当前鼠标位置减去偏移量，得到元素的正确位置
        refToUser.current.style.left = `${e.clientX - mouseOffset.current.x}px`;
        refToUser.current.style.top = `${e.clientY - mouseOffset.current.y}px`;
    }

    function mousePressed(e) {
        setIsMousePressed(true);
        if (!refToUser.current) return;
        
        // 记录鼠标在元素内的偏移：鼠标位置 - 元素的位置
        const rect = refToUser.current.getBoundingClientRect();
        mouseOffset.current = {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };
    }

    function mouseReleased() {
        setIsMousePressed(false);
    }

    useEffect(() => {
        // 绑定全局事件
        if (isMousePressed) {
            document.addEventListener('mousemove', moveUser);
            document.addEventListener('mouseup', mouseReleased);
        } else {
            document.removeEventListener('mousemove', moveUser);
            document.removeEventListener('mouseup', mouseReleased);
        }

        // 清理函数
        return () => {
            document.removeEventListener('mousemove', moveUser);
            document.removeEventListener('mouseup', mouseReleased);
        };
    }, [isMousePressed]);

    useEffect(() => {
        setUser({
            name: "",
            height: props.props.userSize,
            width: props.props.userSize,
            backgroundColor: props.props.backgroundColor
        });
    }, [props.props]);

    return (
        <div ref={refToUser}
            style={{
                height: user.height,
                width: user.width,
                position: "absolute", // 设置绝对定位
                backgroundColor: user.backgroundColor || "gray",
                cursor: "move"
            }}
            onMouseDown={mousePressed}
        ></div>
    )
}

export default User

关键说明 #

1. 偏移量记录时机：在mousedown时通过getBoundingClientRect()获取元素位置，计算鼠标在元素内的相对偏移，这个值在拖拽过程中固定，不会随元素移动变化，彻底避免跳动问题。
2. 全局事件绑定：将mousemove和mouseup绑定到document，确保鼠标移出元素时仍能继续拖拽，提升交互流畅度。
3. 定位修正：容器设为relative，元素设为absolute，保证元素定位参考父容器，位置计算更准确。

内容的提问来源于stack exchange，提问作者Razielruss