页面布局部分:
<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>
效果展示: