Vue.js 拖拽事件实现：让元素跟随鼠标移动

在 Vue.js 中实现拖拽事件

本文将介绍如何在 Vue.js 中实现拖拽事件，让元素能够跟随鼠标移动。

实现步骤

添加 mousedown 事件： 在需要添加拖拽事件的元素上添加一个 mousedown 事件，这个事件将在用户按下鼠标按钮时触发。
阻止默认行为： 在 mousedown 事件处理程序中，使用 event.preventDefault() 阻止默认行为，这将避免浏览器默认地选择文本或执行其他操作。
获取鼠标坐标： 在 mousedown 事件处理程序中，使用 event.clientX 和 event.clientY 获取鼠标的 x 和 y 坐标，这将成为元素移动的起点。
添加 mousemove 事件： 给 document 添加一个 mousemove 事件，这个事件将在用户拖动鼠标时触发。
计算新位置： 在 mousemove 事件处理程序中，使用 event.clientX 和 event.clientY 获取鼠标的当前坐标，并计算出元素的新位置。
更新元素位置： 在 mousemove 事件处理程序中，将元素的位置更新为新位置，可以使用元素的 style 属性或样式类来实现。
添加 mouseup 事件： 给 document 添加一个 mouseup 事件，这个事件将在用户释放鼠标按钮时触发。
移除事件监听器： 在 mouseup 事件处理程序中，从 document 移除 mousemove 事件和 mouseup 事件处理程序，这将停止元素的移动。

示例代码

<template>
  <div class='box' @mousedown='startDrag'>
    拖拽我
  </div>
</template>

<script>
  export default {
    methods: {
      startDrag(event) {
        event.preventDefault();
        const startX = event.clientX;
        const startY = event.clientY;
        document.addEventListener('mousemove', this.dragging);
        document.addEventListener('mouseup', this.stopDrag);
        this.$refs.box.style.position = 'absolute';
        this.$refs.box.style.left = startX + 'px';
        this.$refs.box.style.top = startY + 'px';
      },
      dragging(event) {
        const deltaX = event.clientX - startX;
        const deltaY = event.clientY - startY;
        this.$refs.box.style.left = (startX + deltaX) + 'px';
        this.$refs.box.style.top = (startY + deltaY) + 'px';
      },
      stopDrag() {
        document.removeEventListener('mousemove', this.dragging);
        document.removeEventListener('mouseup', this.stopDrag);
      },
    },
  };
</script>

<style scoped>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    cursor: move;
  }
</style>

总结

通过以上步骤，我们成功地在 Vue.js 中实现了拖拽事件，让元素能够跟随鼠标移动。该实现方法简单易懂，并可根据具体需求进行扩展。