vue3+TypeScript实现拖拽

在Vue 3和TypeScript中实现拖拽功能，你可以使用原生JavaScript的相关API。以下是一个简单的示例，展示了如何使用Vue 3和TypeScript创建一个可拖拽的组件：

<template>
  <div
    ref="draggable"
    class="draggable"
    @mousedown="startDrag"
    @touchstart="startDrag"
    :style="{ top: top + 'px', left: left + 'px' }"
  >
    拖动我
  </div>
</template>
 
<script lang="ts">
import { ref } from 'vue';
 
export default {
  setup() {
    const draggable = ref<HTMLElement | null>(null);
    const top = ref(0);
    const left = ref(0);
 
    function startDrag(event: MouseEvent | TouchEvent) {
      const clientX = 'clientX' in event ? (event as MouseEvent).clientX : (event as TouchEvent).touches[0].clientX;
      const clientY = 'clientY' in event ? (event as MouseEvent).clientY : (event as TouchEvent).touches[0].clientY;
 
      const offsetX = clientX - draggable.value!.offsetLeft;
      const offsetY = clientY - draggable.value!.offsetTop;
 
      function moveHandler(event: MouseEvent | TouchEvent) {
        const x = 'clientX' in event ? (event as MouseEvent).clientX : (event as TouchEvent).touches[0].clientX;
        const y = 'clientY' in event ? (event as MouseEvent).clientY : (event as TouchEvent).touches[0].clientY;
 
        top.value = y - offsetY;
        left.value = x - offsetX;
      }
 
      function upHandler() {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
        document.removeEventListener('touchmove', moveHandler);
        document.removeEventListener('touchend', upHandler);
      }
 
      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
      document.addEventListener('touchmove', moveHandler);
      document.addEventListener('touchend', upHandler);
    }
 
    return { draggable, top, left, startDrag };
  },
};
</script>
 
<style>
.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  user-select: none;
}
</style>

在这个例子中，我们创建了一个可拖动的组件，其中包含了一些样式和事件监听器。\`startD