vue实现拖拽效果

请按照下面的内容进行阅读。

拖拽效果的实现原理

在 Vue 中实现拖拽效果，通常需要用到两个事件：鼠标按下和鼠标移动。当鼠标按下时，记录下鼠标按下的位置，然后在鼠标移动事件中计算出当前位置和按下位置的差值，再用 JS 或 CSS 把要拖拽的元素移动到当前位置即可。

实现步骤

1. 添加拖拽功能的 HTML 结构

在 HTML 中，我们需要添加一个可拖拽元素，如下所示：

<div id="draggable">
  <h1>我是可拖拽的标题</h1>
</div>

2. 在 Vue 组件中添加拖拽事件处理方法

在 Vue 组件中，我们可以使用鼠标按下和鼠标移动事件来实现拖拽效果。以下是实现过程的代码示例：

<template>
  <div ref="draggable" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
    <h1>我是可拖拽的标题</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
    };
  },
  methods: {
    onMouseDown(e) {
      // 记录鼠标按下时的位置
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.isDragging = true;
    },
    onMouseMove(e) {
      if (!this.isDragging) return;
      // 计算当前位置和鼠标按下时的位置差值
      const deltaX = e.clientX - this.startX;
      const deltaY = e.clientY - this.startY;
      // 设置当前位置
      this.currentX = this.$refs.draggable.offsetLeft + deltaX;
      this.currentY = this.$refs.draggable.offsetTop + deltaY;
      // 移动拖拽元素
      this.$refs.draggable.style.left = `${this.currentX}px`;
      this.$refs.draggable.style.top = `${this.currentY}px`;
    },
    onMouseUp() {
      this.isDragging = false;
    },
  },
};
</script>

在 onMouseDown 事件中，我们记录了鼠标按下时的位置，并设置 isDragging 标志为 true，表示元素正在被拖拽。

在 onMouseMove 事件中，我们计算当前位置和鼠标按下时的位置差值，并移动拖拽元素。要注意的是，拖拽元素的位置需要以 offsetLeft 和 offsetTop 属性为基础，加上差值，以确保元素能够按照鼠标移动的轨迹移动。

在 onMouseUp 事件中，我们将 isDragging 标志设为 false，表示拖拽操作已经结束。

3. 添加样式，使拖拽元素可拖动

为了使拖拽元素能够被拖动，我们需要在 CSS 中设置元素的 position 属性为 absolute，并设置元素的 left 和 top 属性为 0，以确保元素能够放置在父元素的左上角。

#draggable {
  position: absolute;
  left: 0;
  top: 0;
}

示例说明

下面将展示两个示例，一个是基于 Vue 2.x 的示例，另一个是基于 Vue 3.x 的示例。

示例1：Vue 2.x

以下是使用 Vue 2.x 实现拖拽效果的完整示例代码：

<template>
  <div ref="draggable" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
    <h1>我是可拖拽的标题</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
    };
  },
  methods: {
    onMouseDown(e) {
      // 记录鼠标按下时的位置
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.isDragging = true;
    },
    onMouseMove(e) {
      if (!this.isDragging) return;
      // 计算当前位置和鼠标按下时的位置差值
      const deltaX = e.clientX - this.startX;
      const deltaY = e.clientY - this.startY;
      // 设置当前位置
      this.currentX = this.$refs.draggable.offsetLeft + deltaX;
      this.currentY = this.$refs.draggable.offsetTop + deltaY;
      // 移动拖拽元素
      this.$refs.draggable.style.left = `${this.currentX}px`;
      this.$refs.draggable.style.top = `${this.currentY}px`;
    },
    onMouseUp() {
      this.isDragging = false;
    },
  },
};
</script>

<style>
#draggable {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

示例2：Vue 3.x

以下是使用 Vue 3.x 实现拖拽效果的完整示例代码：

<template>
  <div ref="draggable" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
    <h1>我是可拖拽的标题</h1>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const isDragging = ref(false);
    const startX = ref(0);
    const startY = ref(0);
    const currentX = ref(0);
    const currentY = ref(0);
    const draggable = ref(null);

    const onMouseDown = (e) => {
      // 记录鼠标按下时的位置
      startX.value = e.clientX;
      startY.value = e.clientY;
      isDragging.value = true;
    };

    const onMouseMove = (e) => {
      if (!isDragging.value) return;
      // 计算当前位置和鼠标按下时的位置差值
      const deltaX = e.clientX - startX.value;
      const deltaY = e.clientY - startY.value;
      // 设置当前位置
      currentX.value = draggable.value.offsetLeft + deltaX;
      currentY.value = draggable.value.offsetTop + deltaY;
      // 移动拖拽元素
      draggable.value.style.left = `${currentX.value}px`;
      draggable.value.style.top = `${currentY.value}px`;
    };

    const onMouseUp = () => {
      isDragging.value = false;
    };

    return {
      isDragging,
      startX,
      startY,
      currentX,
      currentY,
      draggable,
      onMouseDown,
      onMouseMove,
      onMouseUp,
    };
  },
};
</script>

<style>
#draggable {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

以上就是基于 Vue 的实现拖拽效果的完整攻略，并附上了两个示例代码，希望能对你有所帮助。