在開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到需要拖拽的場(chǎng)景，比如：拖拽排序、拖拽面板、拖拽組件等。

今天給大家推薦五款 Vue3 超實(shí)用的拖拽組件，能夠覆蓋平時(shí)開(kāi)發(fā)中的 99% 拖拽需求?。?！

1. Vue Fluid DnD

Vue Fluid DnD 是一個(gè)為 Vue3 應(yīng)用程序設(shè)計(jì)的流暢和平滑的拖放解決方案，特別適用于列表操作，并且提供了完整的動(dòng)畫(huà)效果。

資源地址

• 官方文檔：https://fluid-dnd.netlify.app/vue/
• GitHub 地址：https://github.com/carlosjorger/fluid-dnd
• 預(yù)覽地址：https://fluid-dnd.netlify.app/example/vertical-list/group-vertical-lists/

2. Vue-drag-resize

Vue-Drag-Resize 是一個(gè)開(kāi)源的 Vue.js 插件，它允許開(kāi)發(fā)者輕松地將拖拽和大小調(diào)整功能添加到 Vue 應(yīng)用程序中。這個(gè)項(xiàng)目由 Kirill Murashov 開(kāi)發(fā)并維護(hù)，目的是為了簡(jiǎn)化 Web 開(kāi)發(fā)者在構(gòu)建交互式界面時(shí)的工作流程

資源地址：

• 官方文檔：https://github.com/kirillmurashov/vue-drag-resize#readme
• GitHub 地址：https://github.com/kirillmurashov/vue-drag-resize
• 預(yù)覽地址：https://kirillmurashov.com/vue-drag-resize/

3. Vue.draggable.next

基于 Sortable.js 的 Vue3 兼容拖放組件，它提供了強(qiáng)大的、可定制化的拖放功能，適用于構(gòu)建交互式和動(dòng)態(tài)的數(shù)據(jù)列表應(yīng)用。該項(xiàng)目致力于提供簡(jiǎn)單易用的API，同時(shí)保持與 Vue 生態(tài)系統(tǒng)的一致性。

資源地址：

• 官方文檔：https://github.com/SortableJS/vue.draggable.next#readme
• GitHub 地址：https://github.com/SortableJS/vue.draggable.next
• 預(yù)覽地址：https://sortablejs.github.io/vue.draggable.next/#/simple

4. Vue3-draggable-resizable

用于拖拽調(diào)整位置和大小的組件，同時(shí)支持沖突檢測(cè)，元素吸附對(duì)齊，實(shí)時(shí)參考線(xiàn)。

這個(gè)庫(kù)提供了高度可定制化的組件，使得任何 HTML 元素都能變得可拖動(dòng)和可調(diào)整大小。它利用了 Vue3 的 Composition API，這使得代碼更易于理解和維護(hù)，同時(shí)基于 interact.js，一個(gè)強(qiáng)大的 JavaScript 庫(kù)，用于處理拖放和觸摸事件。

資源地址：

• 官方文檔：https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md
• GitHub 地址：https://github.com/a7650/vue3-draggable-resizable

5. Revue-draggable

支持 Vue2 和 Vue3！包含一個(gè) ?? 包含所有必需組件/指令/可組合性的組件，或者對(duì)于那些想要更多控制的用戶(hù)，提供了一個(gè)簡(jiǎn)單的抽象，用于處理拖拽事件的核心功能，核心功能也可用作組件/指令/可組合性。

資源地址：

• 官方文檔：https://github.com/bcakmakoglu/revue-draggable#readme
• GitHub 地址：https://github.com/bcakmakoglu/revue-draggable
• 預(yù)覽地址：https://revue-draggable.vercel.app/