vue3.0 + draggable插件实现卡片拖拽排序功能（数据存前端）

最新推荐文章于 2024-07-07 16:20:57 发布

tiffany1993lala

最新推荐文章于 2024-07-07 16:20:57 发布

阅读量1.3k

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/tiffany1993lala/article/details/125769118

版权

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>