vue3 写一个拖拽组件

好的，首先在 Vue 3 中，您可以使用 @drag 和 @drop 事件修饰器来实现拖拽功能。例如：

<template>
  <div @drag="onDrag" @drop="onDrop">
    拖拽区域
  </div>
</template>

<script>
export default {
  methods: {
    onDrag(event) {
      // 处理拖拽事件
    },
    onDrop(event) {
      // 处理 drop 事件
    }
  }
}
</script>

在这个例子中，当用户在 div 元素上拖拽时，会触发 onDrag 方法，当用户在 div 元素上释放时，会触发 onDrop 方法。

您还可以使用 @dragenter、@dragover、@dragleave 事件修饰器来实现更复杂的拖拽功能。

如果您想要创建一个拖拽组件，可以将上述代码封装在一个自定义组件中，并提供相应的 props 和 events 供外部组件使用。

例如：

// DragDrop.vue
<template>
  <div @drag="onDrag" @drop="onDrop">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    // 拖拽数据
    data: {
      type: Object,
      required: true
    }
  },
  methods: {
    onDrag(event) {
      event.dataTransfer.setData('text/plain', JSON.stringify(this.data))
    },
    onDrop(event) {
      const data = JSON.parse(event.dataTransfer.getData('text/plain'))
      this.$emit('drop', data)
    }
  }
}
</script>

// App.vue
<template>
  <DragDrop @drop="onDrop" :data="data">
    拖拽区域
  </DragDrop>
</template>

<script>
import DragDrop from './DragDrop.vue'

export default {
  components: {
    DragDrop
  },
  data() {