使用React寫的一個拖拽圖片的功能，第一次拖拽的時候沒有任何問題，第二次拖拽的時候，上次的圖片left，top狀態(tài)沒有被保存，直接初始化了就和第一次拖拽一樣了。

/**
 * Created by w on 2018/4/4.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './dragAbsolute.css';

class Drag extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isDragging: false,
      mouseX: 0,
      mouseY: 0,
      left: 0,
      top: 0,
      lastMovedX: 0,
      lastMovedY: 0
    };

    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  componentDidMount() {
    console.log('mount');  //初始化
    this.dragDiv.style.left = '0px';
    this.dragDiv.style.top = '0px';
  }

  handleMouseDown(e) {
    let container = this.container;

    this.setState({
      isDragging: true,
      mouseX: e.clientX - container.offsetLeft,
      mouseY: e.clientY - container.offsetTop
    });
  }

  handleMouseMove(e) {

    let container = this.container;

    if (this.state.isDragging) {
      let movedX = e.clientX - container.offsetLeft - this.state.mouseX;
      let movedY = e.clientY - container.offsetTop - this.state.mouseY;

      console.log('moved', movedX, movedY);
      console.log('lastMoved', this.state.lastMovedX, this.state.lastMovedY);

      let throughX = movedX - this.state.lastMovedX;
      let throughY = movedY - this.state.lastMovedY;
      console.log('through', throughX, throughY);

      this.dragDiv.style.left = parseInt(this.state.left) + throughX + 'px';
      this.dragDiv.style.top = parseInt(this.state.top) + throughY + 'px';

      this.setState({
        left: this.dragDiv.style.left,
        top: this.dragDiv.style.top,
        lastMovedX: movedX,
        lastMovedY: movedY
      });
      console.log('state', this.state.left, this.state.top);
    }
  }

  handleMouseUp() {
    this.setState({
      isDragging: false,
    });

  }

  handleMouseLeave() {
    this.setState({
      isDragging: false
    })
  }

  render() {
    return <div>
      <div className="container"
           ref={container => {
             this.container = container
           }}>
        <div className="dragImg"
             ref={dragDiv => {
               this.dragDiv = dragDiv
             }}
             onMouseDown={this.handleMouseDown}
             onMouseMove={this.handleMouseMove}
             onMouseUp={this.handleMouseUp}
             onMouseLeave={this.handleMouseLeave}
        />
      </div>
    </div>
  }
}

ReactDOM.render(<Drag/>, document.getElementById('root'));

/*CSS*/
*{
    margin: 0;
    padding: 0;
}

.container{
    position: relative;
    width: 600px;
    height:500px;
    border: solid 1px darkturquoise;
    overflow: hidden;
    margin: 20px auto auto auto;
}

.dragImg{
    cursor: move;
    position: absolute;
    left: 20px;
    top:80px;
    width: 1805px;
    height: 770px;
    border: solid 1px lightgrey;
    background: url("./img/monitorBg.png");
    z-index: 5;
}