1.index.html

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!

       

    );

  }

}

export default DragBox;

2.思路:

onMouseDown //鼠标按下事件

onMouseMove //鼠标移动事件

onMouseUp //鼠标抬起事件

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