vue3 写一个拖动组件

好的，下面是如何在 Vue 3 中写一个拖动组件的基本步骤。

1. 使用 Vue 3 的 Composition API 来创建组件。

2. 为拖动元素添加 `mousedown` 事件监听器，并在事件处理函数中记录鼠标的初始位置。

3. 在 `document` 上添加 `mousemove` 和 `mouseup` 事件监听器，在这些事件处理函数中计算鼠标的位移并更新拖动元素的位置。

4. 使用 CSS transform 来实现拖动元素的位移。

示例代码如下：

<template>
  <div ref="draggable" @mousedown="handleMouseDown">
    拖动我
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const draggableElement = ref(null);
    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;
    let xOffset = 0;
    let yOffset = 0;

    const handleMouseDown = (event) => {
      initialX = event.clientX - xOffset;
      initialY = event.clientY - yOffset;

      if (event.target === draggableElement.value) {
        isDragging = true;
      }
    };

    const handleMouseUp = (event) => {
      initialX = currentX;
      initialY = currentY;

      isDragging = false;
    };

    const handleMouseMove = (event) => {
      if (isDragging) {
        event.preventDefault();
        currentX = event.clientX - initialX;
        currentY = event.clientY - initialY;

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY);
      }
    };

    const setTranslate = (xPos, yPos) => {
      draggableElement.value.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
    };

    onMounted(() => {
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    });

    return {
      draggableElement,
      handleMouseDown
    };
  }