js实现模拟鼠标拖拽事件「附图文实例」

1.前言

模拟鼠标拖拽事件可以产生一些非常有趣的效果，比如网页中的拖拽、拖拽排序等等，甚至还可以应用到游戏开发中。在JavaScript中模拟鼠标拖拽事件并不难，只需要将MouseDown、MouseMove、MouseUp事件结合在一起，加上对拖拽元素位置的计算就可以了。

2.实现步骤

2.1 MouseDown事件

当用户按下鼠标左键时，首先要执行MouseDown事件，此时需要保存鼠标按下后的坐标和被拖拽元素的初始位置。

let dragEle = document.getElementById('drag-ele');
dragEle.addEventListener('mousedown', function(e){
  let startX = e.clientX,
      startY = e.clientY,
      originX = dragEle.offsetLeft,
      originY = dragEle.offsetTop;
  //todo
});

在MouseDown事件的处理程序中，首先获取鼠标按下时的坐标和被拖拽元素的初始位置，使用offsetLeft和offsetTop获取元素的相对位置。

offsetLeft和offsetTop：offsetLeft和offsetTop属性表示一个元素相对于其父元素的左、上偏移量。如果没有父元素，则相对于文档。

2.2 MouseMove事件

当鼠标继续移动时，执行MouseMove事件，需要根据鼠标的拖拽距离计算拖拽元素的新位置。

document.addEventListener('mousemove', function(e){
  let newX = e.clientX,
      newY = e.clientY,
      distanceX = newX - startX,
      distanceY = newY - startY;
  dragEle.style.left = (originX + distanceX) + 'px';
  dragEle.style.top = (originY + distanceY) + 'px';
});

在MouseMove事件的处理程序中，首先获取鼠标当前的坐标，计算出鼠标的拖拽距离，然后根据鼠标的拖拽距离计算出拖拽元素的新位置并改变元素的left和top属性。

2.3 MouseUp事件

当拖拽结束时，执行MouseUp事件，释放鼠标并停止拖动。

document.addEventListener('mouseup', function(){
  document.removeEventListener('mousemove');
});

在MouseUp事件的处理程序中，使用removeEventListener方法清除MouseMove事件。

3.完整代码

下面是完整的实现代码，可以将代码保存为HTML文件并在浏览器中打开进行测试。

let dragEle = document.getElementById('drag-ele'),
    startX, startY, originX, originY;
dragEle.addEventListener('mousedown', function(e){
  startX = e.clientX;
  startY = e.clientY;
  originX = dragEle.offsetLeft;
  originY = dragEle.offsetTop;
  document.addEventListener('mousemove', move);
  document.addEventListener('mouseup', up);
});
function move(e){
  let newX = e.clientX,
      newY = e.clientY,
      distanceX = newX - startX,
      distanceY = newY - startY;
  dragEle.style.left = (originX + distanceX) + 'px';
  dragEle.style.top = (originY + distanceY) + 'px';
}
function up(){
  document.removeEventListener('mousemove', move);
  document.removeEventListener('mouseup', up);
}

4.总结

本文介绍了如何用JavaScript实现模拟鼠标拖拽事件，并给出了详细的代码实现过程。希望通过本文的介绍，读者可以了解到如何将MouseDown、MouseMove、MouseUp事件结合在一起，达到模拟鼠标拖拽事件的目的，同时也可以学习到使用offsetLeft和offsetTop获取元素相对位置的方法。