VueUse Draggable List 是什么？怎么用？

在前端开发中,用户体验是至关重要的一环，而实现列表的拖拽功能，能够让用户更加直观、便捷地操作数据，VueUse Draggable List 就是一款在 Vue 项目中实现列表拖拽功能的实用工具，VueUse Draggable List 到底是什么？又该如何使用它呢？下面我们就来详细了解一下。

VueUse Draggable List 是什么？

VueUse 是一个 Vue 组合式函数的集合，它提供了一系列实用的工具函数，帮助开发者更高效地构建 Vue 应用，而 VueUse Draggable List 就是其中专门用于实现列表拖拽功能的一个模块。

它基于 Vue 的响应式系统，通过简单的配置，就能让列表元素具备拖拽排序的能力，无论是在任务管理、列表展示还是其他需要用户对列表项进行重新排列的场景中，都能发挥很大的作用。

如何使用 VueUse Draggable List？

（一）安装与引入

你需要在你的 Vue 项目中安装 VueUse，可以通过 npm 或者 yarn 进行安装。

使用 npm 安装：

```bash npm install @vueuse/core ```

使用 yarn 安装：

```bash yarn add @vueuse/core ```

安装完成后,在你的 Vue 组件中引入 DraggableList。

```javascript import { DraggableList } from '@vueuse/core'; ```

（二）基本用法

假设你有一个简单的列表数据,

```javascript const list = ref([ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ]); ```

在模板中使用 DraggableList 组件。

```html ```

这里,`v-model` 绑定了列表数据 `list`，`#item` 插槽用于自定义每个列表项的展示内容，这样，一个基本的可拖拽列表就实现了，当用户拖拽列表项时，`list` 的数据会自动更新，保持与 UI 的同步。

（三）配置选项

VueUse Draggable List 还提供了一些配置选项，以满足不同的需求。

disabled

可以通过 `disabled` 属性来禁用拖拽功能。

```html ```

`isDisabled` 是一个响应式的布尔值，当它为 `true` 时，列表项无法进行拖拽。

animation

设置拖拽时的动画效果。

```html ```

这里的 `200` 表示动画的时长（单位为毫秒），你可以根据实际需求调整这个数值，让拖拽效果更加流畅自然。

handle

指定拖拽的触发元素,如果不设置，整个列表项都可以进行拖拽。

```html ``` ```javascript const draggableList = ref(null); onMounted(() => { draggableList.value = new DraggableList({ // 其他配置... handle: '.drag-handle' }); }); ```

这样,只有带有 `drag-handle` 类名的元素被点击时，才能触发拖拽操作。

（四）事件处理

VueUse Draggable List 还支持一些事件，方便你在拖拽过程中进行相应的处理。

start 事件

当拖拽开始时触发。

```html ``` ```javascript const onDragStart = (event) => { console.log('Drag started', event); // 可以在这里进行一些初始化操作，比如记录起始位置等 }; ```

end 事件

当拖拽结束时触发。

```html ``` ```javascript const onDragEnd = (event) => { console.log('Drag ended', event); // 可以在这里进行一些收尾操作，比如保存排序后的数据到后端等 }; ```

change 事件

当列表排序发生变化时触发。

```html ``` ```javascript const onListChange = (newList) => { console.log('List changed', newList); // 可以在这里对新的列表数据进行处理 }; ```

实际应用场景

（一）任务管理

在任务管理应用中,用户可能需要对任务列表进行重新排序，以安排任务的优先级，使用 VueUse Draggable List，用户可以轻松地拖拽任务项，调整它们的顺序。

（二）商品展示

在电商网站的商品展示页面,可能会有一个推荐商品列表，运营人员可以通过拖拽来调整商品的展示顺序，突出重点商品。

（三）表单字段排序

在一些可自定义的表单中,用户可能希望能够自由拖拽字段的顺序，以符合自己的使用习惯。

VueUse Draggable List 是一款非常实用的 Vue 列表拖拽工具，它通过简单的安装、引入和配置，就能为你的 Vue 项目增添强大的列表拖拽功能，无论是基本的列表展示，还是复杂的业务场景，它都能很好地满足需求，通过合理运用配置选项和事件处理，你可以进一步优化用户体验，实现更加丰富的交互效果，希望本文对你了解和使用 VueUse Draggable List 有所帮助，快去尝试在你的项目中使用它吧！