vue3拖拽组件vuedraggable

页面布局部分：

<template>
    <h1>切换上位置</h1>
    <div class="drag-box">
        <Draggable :list="list" :animation="100" class="list-group" :forceFallback="true" chosen-class="chosenClass"
            group="componentsGroup">
            <template #item="{ element }">
                <div class="items">
                    <div class="title">{{ element.label }}</div>
                    <img :src=element.img height="100" alt="111">
                </div>
            </template>
        </Draggable>
    </div>
    <h1>切换下位置111</h1>
    <div class="drag-box">
        <Draggable :list="cloneList" :animation="100" class="list-group" :forceFallback="true" chosen-class="chosenClass"
            group="componentsGroup">
            <template #item="{ element }">
                <div class="items">
                    <div class="title">{{ element.label }}</div>
                    <img :src=element.img height="100" alt="111">
                </div>
            </template>
        </Draggable>
    </div>
</template>复制

 图片及模块引入部分：

<script setup>
import { reactive } from "vue";
// 引入vuedraggable拖拽组件
import Draggable from "vuedraggable";
// 引入图片
import img1 from '@/assets/images/img1.jpg'
import img2 from '@/assets/images/img2.jpg'
import img3 from '@/assets/images/img3.jpg'
import img4 from '@/assets/images/img4.jpg'
import img5 from '@/assets/images/img5.jpg'
 
const list = reactive([
    {
        img: img1,
        label: "图片1",
        id: 1,
    },
    {
        img: img2,
        label: "图片2",
        id: 2,
    },
    {
        img: img3,
        label: "图片3",
        id: 3,
    },
    {
        img: img4,
        label: "图片4",
        id: 4,
    },
    {
        img: img5,
        label: "图片5",
        id: 5,
    },
]);
// 拉取存放位置的数组
const cloneList = reactive([]);
</script>复制

样式部分： 

<style lang="less" scoped>
.drag-box .items {
    display: flex;
    justify-content: space-between;
    width: 30%;
    padding: 20px;
    margin-bottom: 20px;
    background: #e3e3e3;
    border-radius: 8px;
    text-align: center;
}
 
.chosenClass {
    border: 3px solid red !important;
}
</style>复制

效果展示：