本文主要是介绍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>效果展示：
vuedraggable拖拽
这篇关于vue3拖拽组件vuedraggable的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
