花了3天，我總算找到【拖拽功能】的終極解決方案了
作者：程序員Sunday
如果你想要快速的在 Vue 生態下實現一個 效果不錯的拖拽功能，那么可以考慮 Vue Fluid DnD。
Hello，大家好，我是 Sunday。
在現代Web開發中，拖拽功能 已經成為一種常見且必要的交互模式，尤其是在復雜的用戶界面和數據管理系統中。
但是想要實現這樣的功能卻并不簡單，雖然現在有很多的庫也支持拖拽，但總體效果總是不盡如人意。
前兩天就有位同學需要實現拖拽功能，在我們經過無數次（略微夸大了一點點??）嘗試之后，我終于找到了一種終極解決方案——Vue Fluid DnD。
01：現有的拖拽解決方案
先說下現有的拖拽實現方案吧。
- HTML5 Drag and Drop API：原生 JS 實現，但是整體使用起來比較復雜
- Vue Draggable：Vue 下最活躍的拖拽庫，擁有 19.8K 的 star，功能豐富
- React DnD：React 下最活躍的拖拽庫，擁有 20.6K 的 star
- SortableJS：不依賴框架，但是擴展性有限
- ...
其中最符合 Vue 場景下拖拽需求 的就是 Vue Draggable 了。但是： 這個庫雖然功能全面，但是學習成本較高，并且交互的默認效果不好看。和那位同學溝通之后，發現并不適合。
02：Vue Fluid DnD
Vue Fluid DnD 是一款流暢、流暢的拖放解決方案，適用于 Vue3 上的完整動畫列表。
因此，最終找到了 Vue Fluid DnD 這個庫，我們先來看看官方提供的效果：
圖片
稱得上是 “絲滑流暢” 了吧。
效果滿意了，那么接下來就看它的使用復雜度了。太復雜了也不行（畢竟時間不等人）。
好在它的使用方式并不復雜：
- 安裝 Vue Fluid DnD：
npm i vue-fluid-dnd
yarn add vue-fluid-dnd
pnpm i vue-fluid-dnd- 利用依賴注入的方式，把 useDragAndDrop（核心）注入到整個項目中：
import { createApp } from "vue";
import App from './App.vue';
+ import { useDragAndDrop } from "vue-fluid-dnd";
const app = createApp(App);
+ app.provide('useDragAndDrop', useDragAndDrop);
app.mount('#app');- 在需要使用的組件中，直接完成導入：
<script setup>
import { ref } from "vue";
import { useDragAndDrop } from "vue-fluid-dnd";
const list = ref([1, 2, 3]);
// 注意：parent 表示循環列表的父元素引用！
const { parent } = useDragAndDrop(list);
</script>- 構建 html 結構
<template>
<!-- 對應 JS 中的 parent -->
<ul ref="parent" class="number-list">
<!-- 注意 index 屬性 -->
<li class="number" v-for="(element, index) in list" :key="index" :index="index">
{{ element }}
</li>
</ul>
</template>整個預覽效果如下：
圖片
是不是比較簡單的！
03：Vue Fluid DnD 的優缺點分析
根據以上效果可以發現 Vue Fluid DnD 確實是比較好用，它提供了如下優勢：
- 流暢的用戶體驗：提供高度流暢的拖拽動畫和交互，極大提升用戶體驗。
- 可定制：允許開發者輕松定制拖拽行為、樣式和邏輯，適應不同的應用場景。
- 簡單易用：提供了易于理解和使用的API，即使是初學者也能快速上手。
- Vue.js 原生支持：專為Vue.js設計，集成簡單，完美適配Vue項目。
但是這也并不意味著它是沒有問題的。
- 太年輕了：目前 Vue Fluid DnD 是一個比較新的拖拽庫，star 數 只有 158，最新的版本號為 0.6.14
- 復雜場景下性能優化難度大：在處理大量拖拽元素或復雜拖拽邏輯時，可能需要進行額外的性能優化。
- 功能依賴于Vue生態：僅適用于Vue.js項目，對于其他框架或原生JS項目不適用。
所以：如果你想要快速的在 Vue 生態下實現一個 效果不錯的拖拽功能，那么可以考慮 Vue Fluid DnD。
責任編輯：武曉燕
來源：
程序員Sunday
