title: How to track the distance the mouse moved?
body: <p>Heyo,</p>
  <p>I'm trying to create a dragable slider in vanilla JS.</p>
  <p>For this I'm trying to <code>transform = 'translateX(' + (mouseMovement) + 'px)';</code> the amount of pixels the mouse has moved in a <code>carouselSlide.addEventListener('dragover', dragOver);</code> event.</p>
  <p>However, I don't know how to store a value of the the first time the mouse moved, + or - current position. So far I tried.</p>
  <pre><code>//Hover listeners
  carouselSlide.addEventListener('dragstart', dragStart);
  carouselSlide.addEventListener('dragend', dragEnd);
  carouselSlide.addEventListener('dragover', dragOver);
  
  function dragStart(){
      var x = event.clientX;
      dragOver(x);
  }
  
  function dragEnd(){
      console.log('end');            
  }
  
  var lastX = 0;
  
  function dragOver(x){          
  
      var currentX = event.clientX - x;
  
      var mouseMove = currentX - lastX;
  
      
      
      //Slide Direction
      if (currentX &gt; lastX){
          carouselSlide.style.transform = 'translateX(' + (mouseMove) + 'px)';        
      } else if (currentX &lt; lastX) {
          carouselSlide.style.transform = 'translateX(' + (mouseMove) + 'px)';
      }
  
      lastX = currentX;
      
  }
  </code></pre>
  <p>However, this does not really work. I did find my solutions in another post: <a href="https://stackoverflow.com/questions/53573499/calculate-the-distance-the-mouse-is-moved-during-mouse-button-is-pressed">Calculate the distance the mouse is moved during mouse button is pressed</a></p>
  <p>However, this is jQuery</p>