当前位置：首页 > article >正文

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

article 2025/1/23 7:13:09

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

下载vuedraggable

yarn add vuedraggable@next

npm 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)) return
  loadingPath.value = true
  setTimeout(() => {
    quickRouterList.value = routerList
    Local.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>