Hello，大家好，我是 Sunday。

在現代Web開發中，拖拽功能 已經成為一種常見且必要的交互模式，尤其是在復雜的用戶界面和數據管理系統中。

但是想要實現這樣的功能卻并不簡單，雖然現在有很多的庫也支持拖拽，但總體效果總是不盡如人意。

前兩天就有位同學需要實現拖拽功能，在我們經過無數次（略微夸大了一點點??）嘗試之后，我終于找到了一種終極解決方案——Vue Fluid DnD。

01：現有的拖拽解決方案

先說下現有的拖拽實現方案吧。

1. HTML5 Drag and Drop API：原生 JS 實現，但是整體使用起來比較復雜
2. Vue Draggable：Vue 下最活躍的拖拽庫，擁有 19.8K 的 star，功能豐富
3. React DnD：React 下最活躍的拖拽庫，擁有 20.6K 的 star
4. SortableJS：不依賴框架，但是擴展性有限
5. ...

其中最符合 Vue 場景下拖拽需求 的就是 Vue Draggable 了。但是： 這個庫雖然功能全面，但是學習成本較高，并且交互的默認效果不好看。和那位同學溝通之后，發現并不適合。

02：Vue Fluid DnD

Vue Fluid DnD 是一款流暢、流暢的拖放解決方案，適用于 Vue3 上的完整動畫列表。

因此，最終找到了 Vue Fluid DnD 這個庫，我們先來看看官方提供的效果：

圖片

稱得上是 “絲滑流暢” 了吧。

效果滿意了，那么接下來就看它的使用復雜度了。太復雜了也不行（畢竟時間不等人）。

好在它的使用方式并不復雜：

1. 安裝 Vue Fluid DnD：

npm i vue-fluid-dnd
yarn add vue-fluid-dnd
pnpm i vue-fluid-dnd

2. 利用依賴注入的方式，把 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');

3. 在需要使用的組件中，直接完成導入：

<script setup>
import { ref } from "vue";
import { useDragAndDrop } from "vue-fluid-dnd";

const list = ref([1, 2, 3]);
// 注意：parent 表示循環列表的父元素引用！
const { parent } = useDragAndDrop(list);

</script>

4. 構建 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 確實是比較好用，它提供了如下優勢：

1. 流暢的用戶體驗：提供高度流暢的拖拽動畫和交互，極大提升用戶體驗。
2. 可定制：允許開發者輕松定制拖拽行為、樣式和邏輯，適應不同的應用場景。
3. 簡單易用：提供了易于理解和使用的API，即使是初學者也能快速上手。
4. Vue.js 原生支持：專為Vue.js設計，集成簡單，完美適配Vue項目。

但是這也并不意味著它是沒有問題的。

• 太年輕了：目前 Vue Fluid DnD 是一個比較新的拖拽庫，star 數 只有 158，最新的版本號為 0.6.14
• 復雜場景下性能優化難度大：在處理大量拖拽元素或復雜拖拽邏輯時，可能需要進行額外的性能優化。
• 功能依賴于Vue生態：僅適用于Vue.js項目，對于其他框架或原生JS項目不適用。

所以：如果你想要快速的在 Vue 生態下實現一個 效果不錯的拖拽功能，那么可以考慮 Vue Fluid DnD。