title: draggable react divs: exponential movement
body: <p>I am trying to create a draggable component in React that tracks the path of the mouse pointer, but instead, the component is moving exponentially.
  <a href="https://codepen.io/nanu146/pen/xxwGjOR" rel="nofollow noreferrer">Working demo here</a></p>
  
  <p>Here is how my setup looks:</p>
  
  <p>Blocks: this acts as the holder for draggable components (gray in the image below)</p>
  
  <p>Block: this is the draggable component (pink in the image below)
  <a href="https://i.stack.imgur.com/0qwA3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0qwA3.png" alt="Present Setup"></a>
  I am setting the initial position of Block to be left:0, top:0 and then changing the position based on mouse drag.
  Here is the logic to update position:</p>
  
  <p>upon clicking on the pink Block I am triggering onMouseDown event:</p>
  
  <pre><code>// function to handle mouse down
    mouseDown = (e) =&gt;{
      this.setState({originalX:e.clientX, originalY:e.clientY});
      window.addEventListener("mousemove",this.moving);
      window.addEventListener('mouseup', this.mouseUp);
    }
  </code></pre>
  
  <p>Setting the originalX, originalY to track the original position at which the click event triggered. This is used to compute the delta in position and update the left and top attributes accordingly</p>
  
  <p>Here is how my mouse move looks:</p>
  
  <pre><code> // function to handle mouse move
    moving = ({clientX, clientY})=&gt;{
  
      this.setState((prevState)=&gt;{
         return {
           style:{
             left:(this.state.left+(clientX - this.state.originalX))+"px" ,
             top: (this.state.top+(clientY - this.state.originalY))+"px"
            },
            left:this.state.left+(clientX - this.state.originalX),
            top: this.state.top+(clientY - this.state.originalY)
            };
        });
    }
  </code></pre>
  
  <p>Here I am setting <strong>this.state.style.left</strong> to <strong>(this.state.left+(clientX - this.state.originalX))+"px"</strong> here <strong>this.state.left</strong> represents the initial position that is being passed to the component (in this case its 0). Baiscally, I am adding the change in position <strong>(clientX - this.state.originalX)</strong> to initial position.Also, I am storing this calculation in this.state.left for future updates. Same goes for the attribute top.</p>
  
  <p>This should ideally track the mouse pointer as I drag but the movement seems to be exponential. I tried my best to debug, but couldn't figure out the issue. Grateful if anyone could help here.</p>