使用 Vue CLI 和 vuedraggable 实现拖拽排序功能-CSDN博客

本文链接：https://blog.csdn.net/interest_ing_/article/details/147766401

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

使用vuedraggable 实现拖拽排序功能

使用 Vue CLI 和 vuedraggable 实现拖拽排序功能

使用 Vue CLI 和 vuedraggable 实现拖拽排序功能

在现代的前端开发中，拖拽排序功能是一种常见的交互方式，广泛应用于任务管理、列表排序等场景。本文将详细介绍如何使用 Vue CLI 创建一个 Vue 项目，并通过 vuedraggable 库实现拖拽排序功能，同时为每个项目随机生成不同的颜色。

1. 创建 Vue 项目

首先，确保你已经安装了 Node.js 和 Vue CLI. 如果尚未安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

接下来，使用 Vue CLI 创建一个新的 Vue 项目：

vue create draggable-sortable

在创建过程中，你可以选择默认配置，或者根据需要进行自定义配置。创建完成后，进入项目目录：

cd draggable-sortable

2. 安装 vuedraggable

vuedraggable 是一个基于Sortable.js的Vue组件，用于实现拖拽排序功能。在项目目录中运行以下命令安装 vuedraggable：

npm install vuedraggable

3. 实现拖拽排序功能

在 src/components 目录下创建一个名为 DraggableList.vue 的文件，并添加以下代码：

DraggableList.vue

<template>
  <div>
    <h3>拖拽排序列表</h3>
    <draggable v-model="list" @end="updateOrder">
      <transition-group>
        <div
          class="item"
          v-for="(item, index) in list"
          :key="item.id"
          :style="{ backgroundColor: item.color }"
        >
          {{ item.name }}
        </div>
      </transition-group>
    </draggable>
    <h4>当前顺序：</h4>
    <pre>{{ JSON.stringify(order, null, 2) }}</pre>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "项目1", color: this.getRandomColor() },
        { id: 2, name: "项目2", color: this.getRandomColor() },
        { id: 3, name: "项目3", color: this.getRandomColor() },
        { id: 4, name: "项目4", color: this.getRandomColor() },
        { id: 5, name: "项目5", color: this.getRandomColor() }
      ],
      order: [] // 用于存储当前顺序
    };
  },
  methods: {
    updateOrder(event) {
      // 更新 order 数据
      this.order = this.list.map((item) => item.id);

      // 打印当前顺序
      console.log("当前顺序：", this.order);
    },
    getRandomColor() {
      // 生成随机颜色
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  }
};
</script>

<style scoped>
.item {
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  color: white; /* 设置文字颜色为白色，以便在深色背景上显示 */
  cursor: move;
}
</style>

代码说明

v-model 绑定数据：
- draggable 组件通过 v-model 绑定一个数组 list，该数组中的元素将被渲染为可拖拽的项目。
@end 事件：
- 在拖拽结束时触发 updateOrder 方法，更新 order 数据并打印当前顺序。
随机颜色生成：
- 通过 getRandomColor 方法为每个项目生成随机颜色，并绑定到 :style="{ backgroundColor: item.color }"。
显示当前顺序：
- 使用 <pre>{{ JSON.stringify(order, null, 2) }}</pre> 格式化显示当前顺序。

4. 在主应用中使用组件

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

App.vue

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

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

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>