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中將被拖拽的盒子追加到目標盒子中。