在開發中，我們經常會遇到需要拖拽的場景，比如：拖拽排序、拖拽面板、拖拽組件等。

今天給大家推薦五款 Vue3 超實用的拖拽組件，能夠覆蓋平時開發中的 99% 拖拽需求！！！

1. Vue Fluid DnD

Vue Fluid DnD 是一個為 Vue3 應用程序設計的流暢和平滑的拖放解決方案，特別適用于列表操作，并且提供了完整的動畫效果。

資源地址

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

2. Vue-drag-resize

Vue-Drag-Resize 是一個開源的 Vue.js 插件，它允許開發者輕松地將拖拽和大小調整功能添加到 Vue 應用程序中。這個項目由 Kirill Murashov 開發并維護，目的是為了簡化 Web 開發者在構建交互式界面時的工作流程

資源地址：

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

3. Vue.draggable.next

基于 Sortable.js 的 Vue3 兼容拖放組件，它提供了強大的、可定制化的拖放功能，適用于構建交互式和動態的數據列表應用。該項目致力于提供簡單易用的API，同時保持與 Vue 生態系統的一致性。

資源地址：

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

4. Vue3-draggable-resizable

用于拖拽調整位置和大小的組件，同時支持沖突檢測，元素吸附對齊，實時參考線。

這個庫提供了高度可定制化的組件，使得任何 HTML 元素都能變得可拖動和可調整大小。它利用了 Vue3 的 Composition API，這使得代碼更易于理解和維護，同時基于 interact.js，一個強大的 JavaScript 庫，用于處理拖放和觸摸事件。

資源地址：

• 官方文檔：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！包含一個 ?? 包含所有必需組件/指令/可組合性的組件，或者對于那些想要更多控制的用戶，提供了一個簡單的抽象，用于處理拖拽事件的核心功能，核心功能也可用作組件/指令/可組合性。

資源地址：

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