React中实现左右拖动

import React, { Component } from 'react';  
  
class DraggableDiv extends Component {  
  constructor(props) {  
    super(props);  
    this.state = {  
      x: 0, // 初始x位置  
      isDragging: false, // 是否正在拖动  
      initialMouseX: 0, // 初始鼠标X位置  
    };  
    this.moveRef = React.createRef();  
  }  
  
  handleMouseDown = (e) => {
    this.setState({
      isDragging:    true,
      initialMouseX: e.clientX - this.state.x,
    })
    document.addEventListener('mousemove', this.handleMouseMove)
    document.addEventListener('mouseup', this.handleMouseUp)
}
  
  handleMouseMove = (e) => {  
    if (this.state.isDragging) {  
      const newX = e.clientX - this.state.initialMouseX;  
      this.setState({ x: newX });  
    }  
  }  
  
  handleMouseUp = () => {  
    this.setState({ isDragging: false });  
    document.removeEventListener('mousemove', this.handleMouseMove);  
    document.removeEventListener('mouseup', this.handleMouseUp);  
  }

  handleMouseLeave = () => {
    this.setState({ isDragging: false })
    document.removeEventListener('mousemove', this.handleMouseMove)
    document.removeEventListener('mouseup', this.handleMouseUp)
  }  
  
  render() {  
    return (  
      <div  
        ref={this.moveRef}  
        style={{  
          position: 'absolute',  
          left: `${this.state.x}px`,  
          top: '0',  
          cursor: this.state.isDragging ? 'grabbing' : 'grab',  
          width: '100px',  
          height: '100px',  
          background: 'lightblue',  
          userSelect: 'none' // 防止拖动时选中文本  
        }}  
        onMouseDown={this.handleMouseDown}
        onMouseLeave={this.handleMouseLeave}  
      >  
        Drag me  
      </div>  
    );  
  }  
}  
  
export default DraggableDiv;