vue中的拖拽事件

在Vue中实现拖拽事件的方法如下：

1. 在需要拖拽的元素上绑定mousedown和mouseup事件，分别设置为dragStart和dragEnd函数。

<div class="box" @mousedown="dragStart" @mouseup="dragEnd"></div>

1. 在dragStart函数中，设置元素的初始位置和鼠标按下时的坐标，并为document对象绑定mousemove事件，设置为dragging函数。

dragStart(event) {
  // 获取元素初始位置和鼠标按下时的坐标
  this.startX = event.clientX;
  this.startY = event.clientY;
  this.offsetX = event.currentTarget.offsetLeft;
  this.offsetY = event.currentTarget.offsetTop;
  // 绑定mousemove事件
  document.addEventListener('mousemove', this.dragging);
}

1. 在dragging函数中，计算鼠标移动了多少距离，并将元素的位置进行更新。

dragging(event) {
  // 计算鼠标移动了多少距离
  const deltaX = event.clientX - this.startX;
  const deltaY = event.clientY - this.startY;
  // 更新元素的位置
  const newLeft = this.offsetX + deltaX;
  const newTop = this.offsetY + deltaY;
  event.currentTarget.style.left = newLeft + 'px';
  event.currentTarget.style.top = newTop + 'px';
}

1. 在dragEnd函数中，解除document对象的mousemove事件。

dragEnd() {
  document.removeEventListener('mousemove', this.dragging);
}

完整的示例代码如下：

<template>
  <div class="box" @mousedown="dragStart" @mouseup="dragEnd"></div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
    }
  },
  methods: {
    dragStart(event) {
      // 获取元素初始位置和鼠标按下时的坐标
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.offsetX = event.currentTarget.offsetLeft;
      this.offsetY = event.currentTarget.offsetTop;
      // 绑定mousemove事件
      document.addEventListener('mousemove', this.dragging);
    },
    dragging(event) {
      // 计算鼠标移动了多少距离
      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;
      // 更新元素的位置
      const newLeft = this.offsetX + deltaX;
      const newTop = this.offsetY + deltaY;
      event.currentTarget.style.left = newLeft + 'px';
      event.currentTarget.style.top = newTop + 'px';
    },
    dragEnd() {
      // 解除mousemove事件
      document.removeEventListener('mousemove', this.dragging);
    },
  },
}
</script>