vue3 拖拽插件 vue-draggable-next食用方式

背景：根据公司产品要求，需要在一个页面实现分组拖拽功能，如图所示，拖入到不同的分组则方块变为对应的颜色

首先，引入vue-draggable-next

yarn add vue-draggable-next
npm install vue-draggable-next

第二步，在对应页面引入插件

import { VueDraggableNext } from 'vue-draggable-next'

其中，每个组的样式对应不同的样式即可，样式自定义

其中vue-draggable-next的属性分别对应不同含义：

 <el-row>
     <vue-draggable-next v-model="firstWarn"
                         tag="div"
                         handle=".warn-card"
                         group="warngroup"
                         ghost-class="ghost"
                         class="warn-card-box"
                         animation="300">
         <transition-group>
             <div class="warn-card"
                  v-for="element in firstWarn"
                  :key="element.name">
                 <div class="warn-card-icon warn-first">
                 </div>
                 {{ element.name }}
             </div>
         </transition-group>
     </vue-draggable-next>
 </el-row>
 <el-row>
    <vue-draggable-next v-model="secondWarn"
                        tag="transition-group"
                        group="warngroup"
                        handle=".warn-card"
                        class="warn-card-box"
                        animation="300">
        <transition-group>
            <div class="warn-card"
                 v-for="element in secondWarn"
                 :key="element.name">
                <div class="warn-card-icon warn-second">
                </div>
                {{ element.name }}
            </div>
        </transition-group>
    </vue-draggable-next>
</el-row>
 <el-row>
     <vue-draggable-next v-model="thirdWarn"
                         tag="transition-group"
                         group="warngroup"
                         handle=".warn-card"
                         class="warn-card-box"
                         animation="300">
         <transition-group>
             <div class="warn-card"
                  v-for="element in thirdWarn"
                  :key="element.name">
                 <div class="warn-card-icon warn-third">
                 </div>
                 {{ element.name }}
             </div>
         </transition-group>
     </vue-draggable-next>
 </el-row>

定义三个组分别对应的数组

const firstWarn = ref([
    { name: "单行文本", id: 1 },
    { name: "多行文本", id: 2 },
    { name: "计数器", id: 3 },
    { name: "单选框组", id: 4 },
    { name: "放进去", id: 5 },
    { name: "法全文", id: 6 },
    { name: "切34 ", id: 7 },
    { name: "给我钱额挖法额", id: 8 },
])
const secondWarn = ref([
    { name: "放进去哦七个人", id: 2 },
    { name: "请假可认为", id: 3 },
])
const thirdWarn = ref([
    { name: "jhfquweoh", id: 2 },
    { name: "请假可认为", id: 3 },
    { name: "好哦去我人", id: 5 },
    { name: "欺骗我日哦我今天UI", id: 6 },
])

效果