大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 Vue Fluid DnDA 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：
// 使用 npmnpm i vue-fluid-dnd// 使用 yarnyarn add vue-fluid-dnd// 使用 pnpmpnpm 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">https://github.com/carlosjorger/vue-fluid-dnd?tab=readme-ov-filehttps://vue-fluid-dnd.netlify.app/guides/horizontallist/
https://madewithvuejs.com/vue-fluid-dnd
