Vue3 canvas内创建元素后 鼠标左键长按元素可以进行拖动

在Vue3中，要在Canvas上实现鼠标左键长按时对元素进行拖动，你需要结合HTML5的`MouseEvent` API和Vue的响应式特性。首先，确保你在canvas上设置了事件监听器，并获取到需要拖动的元素。这里是一个简单的步骤：

1. **设置事件监听**:
在Vue组件的模板中绑定`mousedown`和`mousemove`事件，同时处理`mouseup`事件以便释放时停止拖动。

<template>
  <canvas @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp"></canvas>
</template>

2. **定义方法**:
- `onMouseDown(e)`: 当用户点击canvas时，存储当前鼠标位置、开始拖动的元素以及是否正在拖动的状态。
- `onMouseMove(e)`: 更新元素的位置，使其跟随鼠标移动。
- `onMouseUp(e)`: 长按结束，移除拖动状态。

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

const canvas = ref<HTMLCanvasElement>(null);
let isDragging = ref(false);
let dragStartPos = ref(null); // 存储开始位置

function onMouseDown(e) {
  if (!canvas.value || !e.target.isContentEditable) return;
  dragStartPos.value = { x: e.clientX, y: e.clientY };
  isDragging.value = true;
}

function onMouseMove(e) {
  if (isDragging.value) {
    const currentPos = { x: e.clientX, y: e.clientY };
    // 根据元素当前位置和开始位置计算偏移量，更新元素的坐标
    moveElementTo(currentPos);
  }
}

function onMouseUp() {
  isDragging.value = false;
}

// 省略实际移动元素的具体函数moveElementTo，它会接收当前鼠标位置并调整元素的位置
// 例如:
// function moveElementTo(newPos) {
//   // 计算元素的新位置并设置
// }

useEffect(() => {
  canvas.value.addEventListener('mousedown', onMouseDown);
  return () => {
    canvas.value.removeEventListener('mousedown', onMouseDown);
    canvas.value.removeEventListener('mousemove', onMouseMove);
    canvas.value.removeEventListener('mouseup', onMouseUp);
  };
}, [canvas]);
</script>

记得在你的项目中添加完整的`moveElementTo`函数，并根据你的需求定制元素的拖动效果。如果你想要阻止默认的Canvas右键菜单显示，可以在`onMouseDown`里添加`event.preventDefault()`。