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} //鼠標(biāo)按下事件
             onMouseMove={this.handleMouseMove} //鼠標(biāo)移動事件
             onMouseUp={this.handleMouseUp} //鼠標(biāo)抬起事件
             > 
            Drag me!
        </div>
    );
  }
}

export default DragBox;

onMouseDown //鼠標(biāo)按下事件
onMouseMove //鼠標(biāo)移動事件
onMouseUp //鼠標(biāo)抬起事件

主要的實(shí)現(xiàn)思路是：鼠標(biāo)移動到最后的左邊距和上邊距-鼠標(biāo)按下的左邊距和上邊距然后給元素一個(gè)定位給它的left和top賦值就可實(shí)現(xiàn)