vue3使用vuedraggable 实现页面div拖拽和缓存

vue3使用vuedraggable 实现页面div拖拽和缓存

下载vuedraggable

yarn add vuedraggable@nextnpm i -S vuedraggable@next

官方文档链接

页面中使用

import draggable from 'vuedraggable'
//数据
const quickRouterList = ref<routerListType[]>(routerList)
//routerList数据
const routerList: routerListType[] = [{ id: 1, name: '测试1', url: '/test', img: '测试地址' },{ id: 2, name: '测试2', url: '/test', img: '测试地址' },{ id: 3, name: '测试3', url: '/test', img: '测试地址' }
]
//重置
const resetRouter = () => {//如果一样就不需要重置if (JSON.stringify(quickRouterList.value) === JSON.stringify(routerList)) returnloadingPath.value = truesetTimeout(() => {quickRouterList.value = routerListLocal.remove('index-quickRouterListMove')loadingPath.value = false}, 200)
}
//生命周期
onMounted(async () => {//判断排序quickRouterList.value = Local.get('index-quickRouterListMove') || quickRouterList.value
})
//排序存入
const endMove = () => {Local.set('index-quickRouterListMove', quickRouterList.value)
}

页面中使用

<draggable @end="endMove" v-model="quickRouterList" class="flex w-full justify-between"><template #item="{ element }"><div class="cursor-move flex flex-col items-center"><img class="img pathIcon" :src="element.img" alt="" /><div class="text cursor-pointer">{{ element.name }}</div></div></template>
</draggable>