大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Vue Fluid DnD

A fluid, smooth and versatil drag and drop library for lists on Vue3. It's a lightweight tool ~5 Kb (gzip) with no depenencies.

Vue Fluid DnD 是一个流畅、平滑且多功能的 Vue3 列表拖放库，其是一个轻量级工具，gzip 后体积大约 5 Kb ，没有任何依赖项。

Vue Fluid DnD 的典型特征包括：

• ? 完全可定制
• ? 零依赖
• ? 支持使用水平??和垂直列表??
• ? 支持鼠标和触摸，包括：手机、平板电脑等支持
• ? 支持很好的文档和示例
• ? 经过全面测试，可靠

如何使用 Vue Fluid DnD

首先，使用首选的包管理器安装 Vue Fluid DnD：

// 使用 npm
npm i vue-fluid-dnd
// 使用 yarn
yarn add vue-fluid-dnd
// 使用 pnpm
pnpm i vue-fluid-dnd

接着，开发者可以使用 provide/inject 设置可组合项（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');

当然，开发者也可以选择导入 composable，即 useDragAndDrop：

<script>
  import {useDragAndDrop} from 'vue3-fluid-dnd';
</script>

下面示例使用 Vue Fluid DnD 对水平列表进行排序。首先创建一个数字列表，并添加具有 horizontal 属性的 direction：

<script setup lang="ts">
    const list = ref(1, 2, 3, 4, 5]);
    const {parent} = useDragAndDrop(list, { direction: "horizontal" });
</script>

接着使用 useDragAndDrop 全局注册：

<template>
  <div ref="parent" class="number-list">
    <div class="number" v-for="(element, index) in list" :index="index">
      {{ element }}
    </div>
  </div>
</template>
<style>
.number-list {
  display: flex;
  flex-direction: row;
}
</style>

参考资料

https://github.com/carlosjorger/vue-fluid-dnd?tab=readme-ov-file

https://vue-fluid-dnd.netlify.app/guides/horizontallist/

https://madewithvuejs.com/vue-fluid-dnd