vue3+ts使用拖拽功能实现拖拽按钮根据按钮类型生成对应组件，并且在拖拽到目标容器内时可预览位置

实现拖拽功能需要使用 HTML5 的拖放 API。具体实现步骤如下：

1. 创建拖动的按钮，给按钮添加 draggable 属性，并监听 dragstart 事件，将需要传递的数据存储在 event.dataTransfer 中。

2. 创建目标容器，给容器添加 dragover 和 drop 事件的监听器。在 dragover 事件中阻止默认行为，并设置光标样式，以及获取鼠标位置，用于计算预览位置。在 drop 事件中获取 event.dataTransfer 中的数据，并根据数据类型生成对应的组件，并将组件插入目标容器中。

3. 在拖动过程中，可以使用 dragenter 和 dragleave 事件来实现预览位置的效果。在 dragenter 事件中根据鼠标位置计算出预览位置，并将预览位置插入到目标容器中。在 dragleave 事件中将预览位置移除。

4. 如果需要使用 TypeScript，可以使用 Vue3 的 Composition API 来实现。具体实现方法可以参考以下代码：

<template>
  <div class="container" @dragover.prevent @drop="handleDrop">
    <div class="preview" v-if="showPreview" :style="{ left: previewX + 'px', top: previewY + 'px' }">
      {{ previewType }}
    </div>
    <button class="draggable" draggable="true" @dragstart="handleDragStart('button')">Button</button>
    <button class="draggable" draggable="true" @dragstart="handleDragStart('input')">Input</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const showPreview = ref(false);
    const previewX = ref(0);
    const previewY = ref(0);
    const previewType = ref('');

    const handleDragStart = (type: string, event: DragEvent) => {
      event.dataTransfer?.setData('type', type);
    };

    const handleDrop = (event: DragEvent) => {
      event.preventDefault();
      const type = event.dataTransfer?.getData('type');
      if (type === 'button') {
        // 生成 Button 组件并插入到容器中
      } else if (type === 'input') {
        // 生成 Input 组件并插入到容器中
      }
    };

    const handleDragEnter = (event: DragEvent) => {
      event.preventDefault();
      showPreview.value = true;
      previewX.value = event.clientX;
      previewY.value = event.clientY;
      const type = event.dataTransfer?.getData('type');
      previewType.value = type || '';
    };

    const handleDragLeave = () => {
      showPreview.value = false;
    };

    return {
      showPreview,
      previewX,
      previewY,
      previewType,
      handleDragStart,
      handleDrop,
      handleDragEnter,
      handleDragLeave,
    };
  },
});
</script>