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

一个非常实用的 Vue 拖拽组件，成熟、稳定且功能丰富的拖拽库，效率与灵活性的双重提升（带私活源码）

news 2024/10/23 21:08:33

今天要为大家介绍一个非常实用的 Vue 拖拽组件 —— Vue Draggable Plus。无论你是 Vue 2 的忠实用户，还是已经拥抱了 Vue 3 的新特性，这个组件都将为你的拖拽需求带来全新的解决方案。

VueDraggablePlus

Vue Draggable Plus 继承了 Sortable.js 的所有功能，这意味着你可以享受到一个成熟、稳定且功能丰富的拖拽库所带来的便利。无论你的项目是基于 Vue 2 还是 Vue 3，Vue Draggable Plus 都能完美适配，让你的迁移之路无比顺畅。

特点

功能齐全：该组件全面继承了 Sortable.js 的所有功能，为用户提供了丰富的拖拽操作选项。
无缝迁移：兼容 Vue 3 和 Vue 2，使得从旧版本到新版本的迁移变得轻松无障碍。
灵活使用：支持通过组件、指令或函数式调用等多种方式使用，满足了不同开发者的使用习惯和项目需求。
类型安全：使用 TypeScript 编写，提供了完整的 TypeScript 文档，确保了代码的类型安全和易于维护。
双向绑定：支持 v-model 双向绑定，使得数据的同步和更新更加直观和便捷。
自定义容器：允许开发者将任意指定的容器作为拖拽容器，增加了组件的灵活性和使用场景。
易于集成：Vue Draggable Plus 易于集成到现有的 Vue 项目中，无论是小型项目还是大型应用，都能快速引入并使用。
社区支持：作为开源项目，Vue Draggable Plus 拥有活跃的社区支持，用户可以从社区获得帮助和最新的更新。

安装使用

通过 npm 或 yarn 安装 Vue Draggable Plus

npm install vue-draggable-plus
# 或者
yarn add vue-draggable-plus

有两种方式可以实现拖拽

方式一：使用组件实现拖拽

<template><div class="flex"><VueDraggableref="el"v-model="list":disabled="disabled":animation="150"ghostClass="ghost"class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"@start="onStart"@update="onUpdate"@end="onEnd"><divv-for="item in list":key="item.id"class="cursor-move h-30 bg-gray-500/5 rounded p-3">{{ item.name }}</div></VueDraggable><preview-list :list="list" /></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import {type DraggableEvent,type UseDraggableReturn,VueDraggable
} from 'vue-draggable-plus'
const list = ref([{name: 'Joao',id: 1},{name: 'Jean',id: 2}
])const el = ref<UseDraggableReturn>()
const disabled = ref(false)
function pause() {el.value?.pause()
}function start() {el.value?.start()
}const onStart = (e: DraggableEvent) => {console.log('start', e)
}const onEnd = (e: DraggableEvent) => {console.log('onEnd', e)
}const onUpdate = () => {console.log('update')
}
</script>

方式二：使用函数实现拖拽

<template><button @click="start()">start</button><div class="flex"><divclass="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"ref="el"><divv-for="item in list":key="item.id"class="h-30 bg-gray-500/5 rounded p-3 cursor-move">{{ item.name }}</div></div><preview-list :list="list" /></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const list = ref([{name: 'Joao',id: 1},{name: 'Jean',id: 2}
])
const el = ref()const { start } = useDraggable(el, list, {animation: 150,ghostClass: 'ghost',onStart() {console.log('start')},onUpdate() {console.log('update')}
})
</script>