如何在Vue3中实现列表项的拖拽排序功能_vue3 拖拽排序

在现代的 Web 开发中，用户体验一直是非常重要的一个方面。为了提升用户的交互体验，拖拽排序功能在很多场景下都得到了广泛应用，无论是文件管理系统、任务管理工具还是任何需要对列表项进行自定义排序的应用。本文将向大家介绍如何在 Vue 3 中通过简单步骤实现列表项的拖拽排序功能。

目录

1. 拖拽排序功能简介
2. Vue 3 项目初始化
3. 安装并引入 vue3-drag-and-drop
4. 实现拖拽排序功能

1. 拖拽排序功能简介

拖拽排序功能允许用户通过拖拽操作来改变列表项的位置。实现这个功能需要解决两个主要问题：

1. 捕捉用户的拖拽事件。
2. 更新列表的排序。

幸运的是，我们不需要从头开始构建这个功能，有很多现成的库可以帮助我们实现它。在这篇文章中，我们将使用 vue3-drag-and-drop 库来方便地实现列表项的拖拽排序。

2. Vue 3 项目初始化

首先，我们需要初始化一个 Vue 3 项目。如果你已经有一个 Vue 3 项目，可以跳过这一步。如果没有，可以按照以下步骤进行。

首先，安装 Vue CLI：

npm install -g @vue/cli
1

然后，使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create drag-and-drop-demo
1

选择默认的 Vue 3 选项，等待项目创建完成，然后进入项目目录：

cd drag-and-drop-demo
1

启动开发服务器：

npm run serve
1

3. 安装并引入 vue3-drag-and-drop

接下来，我们需要安装 vue3-drag-and-drop 库，这个库提供了简单易用的拖拽功能：

npm install vue3-drag-and-drop
1

安装完成后，我们可以在组件中引入并使用这个库。我们将创建一个新的组件 DraggableList.vue。

4. 实现拖拽排序功能

1. 在 src 目录下创建一个新的 components 文件夹，并在其中创建一个 DraggableList.vue 文件。

2. 编辑 DraggableList.vue 文件，编写如下代码：

<template>
  <div class="draggable-list">
    <h2>拖拽排序的列表</h2>
    <draggable
      v-model="items"
      group="items"
      @update="onUpdate">
      <transition-group>
        <div
          v-for="(item, index) in items"
          :key="item.id"
          class="list-item"
        >
          {{ item.name }}
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const items = ref([
      { id: 1, name: '项目 1' },
      { id: 2, name: '项目 2' },
      { id: 3, name: '项目 3' },
      { id: 4, name: '项目 4' },
    ]);

    const onUpdate = (evt) => {
      console.log('列表项已更新', evt);
    };

    return {
      items,
      onUpdate,
    };
  },
};
</script>

<style scoped>
.draggable-list {
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  width: 300px;
  margin: auto;
}

.list-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.list-item:hover {
  background-color: #f1f1f1;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

3. 最后，在 src/App.vue 文件中引入并使用 DraggableList 组件：

<template>
  <div id="app">
    <DraggableList />
  </div>
</template>

<script>
import DraggableList from './components/DraggableList.vue';

export default {
  name: 'App',
  components: {
    DraggableList
  }
};
</script>

<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

解释代码

1. 模板部分：

   • draggable 是 vue3-drag-and-drop 提供的组件。我们使用 v-model 指令将列表项 items 绑定到该组件。
   • @update 事件用于监听列表项的变化，并执行 onUpdate 方法。
   • transition-group 用于为列表项添加过渡效果，使得拖拽动画更加流畅。

2. 脚本部分：

   • 使用 ref 创建一个响应式数据 items，包含我们要显示的列表项。
   • onUpdate 方法在列表项顺序发生变化时执行，在这里只简单地打印了一个控制台日志，你可以根据实际需求进行修改。

3. 样式部分：

   • 简单地为列表和列表项添加了一些样式。

到这里，你已经成功实现了一个带有拖拽排序功能的列表项应用。在实际项目中，你可以根据具体需求进行更复杂的自定义和扩展。

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作