时间戳

首页 > 解决方案 > 如何跟踪鼠标移动的距离？

javascript - 如何跟踪鼠标移动的距离？

问题描述

嘿嘿，

我正在尝试在 vanilla JS 中创建一个可拖动的滑块。

为此，我正在尝试transform = 'translateX(' + (mouseMovement) + 'px)';鼠标在carouselSlide.addEventListener('dragover', dragOver);事件中移动的像素数量。

但是，我不知道如何存储鼠标第一次移动的值，+ 或 - 当前位置。到目前为止我试过了。

//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 > lastX){
        carouselSlide.style.transform = 'translateX(' + (mouseMove) + 'px)';        
    } else if (currentX < lastX) {
        carouselSlide.style.transform = 'translateX(' + (mouseMove) + 'px)';
    }

    lastX = currentX;
    
}

然而，这并没有真正起作用。我确实在另一篇文章中找到了我的解决方案：计算按下鼠标按钮期间鼠标移动的距离

然而，这是 jQuery

标签： javascript

解决方案

一种方法是绑定它，以便在启动事件时存储变量。然后我会绑定其他事件来监听位置的变化。最后，我会删除这些事件。

function dragStart(evt) {
  const startX = evt.clientX;

  const handleDrag = function(evt) {
    document.querySelector("#out").textContent = evt.clientX - startX;
  }

  const dragEnd = function(evt) {
    this.removeEventListener("drag", handleDrag);
    this.removeEventListener("dragend", dragEnd);
  }

  this.addEventListener("drag", handleDrag);
  this.addEventListener("dragend", dragEnd);

}

var elem = document.querySelector("#test");
elem.addEventListener('dragstart', dragStart);
#test {
  width: 100%;
  height: 300px;
  background-color: #CCC;
}

#test div {
  width: 100px;
  height: 300px;
  background: yellow;
}
<div id="test">
  <div draggable="true">X</div>
</div>

<div id="out"></div>

推荐阅读