组件拖拽复制

1.首先给组件添加 draggable(是否开启组件拖拽) true为真
官网：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attr...
例子：

<!-- 左侧按钮 -->
    <div class="left">
        <!-- 开启拖拽 -->
        <BtnCom draggable="true"></BtnCom>
    </div>

效果：

2.目标盒子内容使用事件dragover阻止事件默认行为
官网：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/...

目标盒子
<div class="context" @dragover="handleDragOver">

</div>
// 在目标盒子中阻止事件默认行为 以允许放置
const handleDragOver = (e) => e.targe.preventDefault()

3.添加事件drop获取目标盒子
官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer...
代码：

    <div class="context" @dragover="handleDragOver" @drop="handleDrag">

    </div>
// 获取目标盒子
const handleDrag = (e) => {
    console.log(e.target, 1111);

}

效果图：

4.获取被拖拽的盒子(使用dragstart-- 一开始拖动的时候就获取到被拖动的盒子)将他存储到pinia中，在目标盒子中渲染上去
官网：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/...

代-码：
首先创建仓库 定义存储组件的变量 和 方法

import { defineStore } from "pinia"
import { ref } from "vue"

// 创建仓库
export const useCopyStore = defineStore("copy", () => {
  // 定义存储组件的变量
  const com = ref(null)

  // 定义存储的方法
  const setCom = (dom: any) => {
    // 赋值
    com.value = dom
  }
  return { com, setCom }
})

在被拖拽的组件的使用dragstart事件 获取被拖动盒子dom，然后调用仓库存储组件的方法传递 被拖动盒子的dom

// 引入仓库
import { useCopyStore } from "@/stores/copy"
// 定义变量
const store = useCopyStore()

// 当拖拽开始就会触发的方法  <!-- 绑定拖拽一开始的事件 -->
window.addEventListener("dragstart", (e) => {
    // 给pinia中存储的变量赋值 ==》值就是触发事件的这个组件
    console.log(e.target);
    // 调用存储组件的方法
    store.setCom(e.target)

})
<template>
    <!-- 左侧按钮 -->
    <div class="left">
        <!-- 开启拖拽 -->
        <BtnCom draggable="true"></BtnCom>
    </div>
</template>

最后在目标盒子引入仓库中存储的组件，追加到目标盒子里

<script setup lang="ts">
// 引入仓库
import { useCopyStore } from '@/stores/copy';
// 引入转换仓库的响应式数据
import { storeToRefs } from "pinia"
// 定义变量存储数据
const store = useCopyStore()
const { com } = storeToRefs(store)

// 在目标盒子中阻止事件默认行为 阻止默认行为以允许放置
const handleDragOver = (e) => e.preventDefault()

// 获取目标盒子
const handleDrag = (e) => {
    // console.log(e.target, 1111); 目标盒子
    // console.log(com, 1111); 被拖拽的元素

    // 添加的中间的盒子上面 末尾追加
    e.target.appendChild(com.value)

}
</script>

<template>
    <!--  -->
    <div class="context" @dragover="handleDragOver" @drop="handleDrag">

    </div>
</template>

效果图：

1. 开启拖拽 draggable='true'
2. 在目标盒子组件拖拽的目前行为 以允许放置 dragover事件
3. 获取目标盒子 使用 drop事件(迭代器)
4. 获取被拖拽的盒子 使用 dragstart事件 获取被拖拽的盒子
5. 创建仓库定义存储组件的变量 和 方法
6. 在拖拽的组件中引入仓库 调用存储变量的方法 将被拖拽的元素以参数的形式传递过去
7. 在目标盒子里，引入仓库 将仓库中存储组件的变量在 使用drop中将被拖拽的盒子追加到目标盒子中。