花了3天，我总算找到【拖拽功能】的终极解决方案了-51CTO.COM

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。