vue.draggable.next 中文文档 - itxst.com 参考文档
首先安装包,因为draggable依赖sortablejs,所以两个包都要下载
<div class="cardCon">
<draggable
:list="cardList"
item-key="id"
ghost-class="ghost"
chosen-class="chosenClass"
animation="300"
@start="onStart"
@end="onEnd"
>
<template #item="{ element }">
<NCard @click="clickCard(element.flag)">
<span class="imgCon"><img :src="element.src" alt=""></span>
<span class="cardDesc">{{element.name}}</span>
</NCard>
</template>
</draggable>
</div>
<script lang="ts" setup>
import draggable from 'vuedraggable'
const cardList = reactive([{
id:1,
name:'项目列表',
src:projectImg,
flag: 'project'
},{
id:2,
name:'CI/CD',
src: cicdImg,
flag: 'cicd'
},
{
id:3,
name:'日志中心',
src:logImg,
flag: 'log'
},
{
id:4,
name:'监控告警',
src:warningImg,
flag: 'warning'
},
{
id:5,
name:'开放平台',
src:openImg,
flag: 'open'
},
{
id:6,
name:'权限中心',
src:authImg,
flag: 'auth'
}
])
const onStart = (event) => {
console.log("开始拖动",event)
}
const onEnd = (ev) => {
console.log("拖动结束2",ev)
}
</script>