react实现拖拽功能

import React, { Component } from 'react';
import './index.css'
class DragBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
        left: 0,
        top: 0,
        isDragging: false,
        startX: 0,
        startY: 0
    };
  }

  handleMouseDown = (e) => {
    this.setState({
        isDragging: true,
        startX: e.clientX,
        startY: e.clientY
    });
  }

  handleMouseMove = (e) => {
    if (this.state.isDragging) {
        const offsetX = e.clientX - this.state.startX;
        const offsetY = e.clientY - this.state.startY;
        this.setState({
            left: this.state.left + offsetX,
            top: this.state.top + offsetY,
            startX: e.clientX,
            startY: e.clientY
        });
    }
  }

  handleMouseUp = (e) => {
    this.setState({
        isDragging: false
    });
  }

  render() {
    return (
        <div className="drag-box"
             style={{ left: this.state.left + 'px', top: this.state.top + 'px' ,position:'absolute'}}
             onMouseDown ={this.handleMouseDown} //鼠标按下事件
             onMouseMove={this.handleMouseMove} //鼠标移动事件
             onMouseUp={this.handleMouseUp} //鼠标抬起事件
             > 
            Drag me!
        </div>
    );
  }
}

export default DragBox;

onMouseDown //鼠标按下事件
onMouseMove //鼠标移动事件
onMouseUp //鼠标抬起事件

主要的实现思路是：鼠标移动到最后的左边距和上边距-鼠标按下的左边距和上边距然后给元素一个定位给它的left和top赋值就可实现