vue3鼠标拖动事件

Vue3中处理鼠标拖动事件通常通过`@mousedown`、`@mousemove`和`@mouseup`组合来实现。你可以创建一个自定义指令或者在组件内监听这些事件。下面是一个简单的示例：

<template>
  <div @mousedown="startDrag" @mousemove="dragging" @mouseup="endDrag">
    <span draggable>{{ draggableElement }}</span>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

const draggableElement = "这是一个可以被拖动的元素";

function startDrag(e) {
  // 记录开始位置
  const startX = e.clientX;
  const startY = e.clientY;
  // 添加阻止默认行为防止浏览器元素拖动
  e.preventDefault();
}

function dragging(e) {
  // 根据开始位置计算当前的移动距离
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;

  // 更新元素的位置
  setDraggableElement(draggableElement + `(${deltaX}, ${deltaY})`);
}

function endDrag() {
  // 当鼠标抬起时，移除事件监听并停止拖动效果
  document.removeEventListener('mousemove', dragging);
}

onMounted(() => {
  document.addEventListener('mousemove', dragging);
});
</script>

在这个例子中，当你在指定的`<span>`上按下鼠标并开始移动时，就会触发`dragging`函数，更新元素的位置。当鼠标释放时，会移除`mousemove`监听器。