vue.draggable 入门指南 - 手把手教你开发任务看板

在 Vue 中，组件拖拽功能非常难写，有大量的深坑藏在里面。当然也有非常多的第三方库帮你实现拖拽功能，其中最棒的拖拽组件库就是 vue.draggable 了，本文将带领大家学习如何使用 vue.draggable 搭建一套任务看板，最终我们实现任务条在四个容器中来回拖拽的效果。

跟随本教程学习，最终你的学习成果：

04-draggable-todo

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的任务工具或后台管理工具，一周工作量缩减至一天，详见本文文末。

一. vue.draggable 优势

Vue.draggable 可以说是「拖拽功能」最棒的组件库之一，它有三个很大的优势：

支持触摸设备：vue.draggable 对移动触摸设备友好，它不仅可以实现鼠标光标移动，也对触摸设备有很好的支持。
拖拽与选取文本识别：有时用户会想复制拖拽元素上的文字，多数库无法识别此类用户操作，vue.draggable 可以识别拖拽动作或选择文字的动作。
对 Vue UI 库友好，你可以把现有的 Vue 组件附加到可拖拽的元素上，实现这个组件的拖拽功能。

二. 添加并配置 vue.draggable

添加 vue.draggable 库到 Vue 项目里非常简单，首先我们先来创建一个新 Vue app：

vue create kalacloud-draggable
cd kalacloud-draggable

进入项目根目录后，我们通过 npm 来安装 vuedraggable

npm i -s vuedraggable

完成安装后，用以下代码替换 src/App.vue 中的代码。

文件位置：src / App.vue

<template>
  <main>
    <div class="mt-5 container">
      <div class="row justify-content-center border py-5">
        <div class="col-5">
          <h4 class="mb-3">容器 A</h4>
          <draggable class="draggable-list" :list="list1" group="my-group">
            <div class="list-item" v-for="element in list1" :key="element.name">
              {{ element.name }}
            </div>
          </draggable>
        </div>

        <div class="col-5">
          <h4 class="mb-3">容器 B</h4>
          <draggable class="draggable-list" :list="list2" group="my-group">
            <div class="list-item" v-for="element in list2" :key="element.name">
              {{ element.name }}
            </div>
          </draggable>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list1: [{ name: "方块A：拖动我试试" }],
      list2: [{ name: "方块B：请拖动我试试" }],
    };
  },
};
</script>
<style scoped>
.draggable-list {
  background: #3f51b5;
  color: #fff;
  border: 1px solid;
  height: 50vh;
}
.list-item {
  margin: 10px;
  padding: 40px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
  background: #f44336;
  display: inline-block;
}
</style>

我们把 vue.draggable 拖拽组件导入 vue ，然后添加两组模拟数据。

运行我们写的 app 看看效果：

npm run serve

在浏览器里应该能看到以下输出：

01-draggable-ab

拓展阅读：《最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐》

三. Vue.draggable 小例

为什么说 Vue.draggable 好用呢，主要是它开箱即用的特性，<draggable> 中的所有子元素都可实现拖拽功能。

虽然非必须，但还是建议大家把所有可拖拽的项目与<draggable> 同步，这样当我们想把自定义函数附到拖拽事件里时很有用。

<template>
  <main>
    <div>
      <draggable :list="myList">
        <div v-for="(list, i) in myList" :key="i">
          {{ list }}
        </div>
      </draggable>
    </div>
  </main>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      myList: ["拖拽第一行", "拖拽第二行", "拖拽第三行"],
    };
  },
};
</script>

运行上面的代码，您的浏览器中应该有以下输出：

02-draggable-my-list

拓展阅读：《订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统》

四. vue.draggable 更多功能

group

要实现两个或多个区域内组件的拖拽，各区域的 group 对象名需要命名一致。可以写成 group：‘kalacloud-group’ 或者 group:{name:'kalacloud-group'}

clone

clone 是 group 中的一个十分有用的功能。打开后，拖拽时可将被拖拽组件复制到另一个区域。

我们来修改一下这段代码，将本段代码添加到本文第二小节

<draggable
        class="draggable-list"
        :list="list1"
        :group="{ name: 'my-group', pull: 'clone', put: false}"
    >
...

group 里的 pull: 'clone' 开启后，表示拖拽后克隆拖拽组件。put: false 用来定义是否可以往此容器中放置组件，true 表示可以，false 表示不行。

运行上面这段代码可以发现，从左边向右拖拽可实现克隆(pull: 'clone')，从右边无法向左边拖拽（put:false）

03-draggable-clone

拓展阅读：《最好用的 7 个 Vue Tree select 树形组件》

调试 draggable 拖拽太麻烦？

试试卡拉云，无需懂前端，拖拽即可生成各类组件，连接 API 和数据库直接生成后台系统，两个月的工期降低至1天

五. 使用 vue.draggable 快速搭建任务管理看板

上文我们已经讲解了 draggable 的基本功能，接下来我们实战演练一下，我们来一起搭一个开发任务看板。这个任务看板分为四列，分别是待开发，开发中，待测试，完成，四项。

我们直接使用 Bootstrap 来快速设置我们的看板基础结构，你需要把 Bootstrap CDN 代码添加到 index.html 里的 <head> 中。

文件位置：public / index.html

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>

接下来，打开并将其内容更改为以下内容：

文件位置：src / App.vue

<template>
  <div class="container mt-5 mb-5">
    <div class="row">
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>待开发</h6>
      </div>
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>开发中</h6>
      </div>
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>待测试</h6>
      </div>
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>完成</h6>
      </div>
    </div>
  </div>
</template>
<style scoped>
h6 {
  font-weight: 700;
}
.col {
  height: 90vh;
}
</style>

运行代码看到如下效果，我们任务看板的大框架已经出来了。

接下来，我们要在该script部分中导入 vue.draggable 并为我们板中的每一列创建一些虚拟任务：

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: {
        ideas: ["Migrate codebase to TypeScript"],
        todos: ["Dockerize App", "Add vue.draggable to project"],
        inProgress: ["Implement Web3 Features", "Bump to vite.js"],
        completed: [],
      },
    };
  },
};
</script>

最后一步是在我们的页面中实现<draggable>组件，并分别循环遍历每一列中的任务。

为此，请更新以下代码：src/App.vue

<template>
  <div class="container mt-5 mb-5">
    <div class="row">
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>待开发 💡</h6>
        <draggable class="draggable-list" :list="tasks.todos" group="tasks">
          <div v-for="(idea, i) in tasks.todos" :key="i">
            <div class="bg-white mt-3 p-2 shadow border rounded">
              <p>{{ idea }}</p>
            </div>
          </div>
        </draggable>
      </div>
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>开发中 ✍</h6>
        <draggable class="draggable-list" :list="tasks.inprogress" group="tasks">
          <div v-for="(todo, i) in tasks.inprogress" :key="i">
            <div class="bg-white mt-3 p-2 shadow border rounded">
              <p>{{ todo }}</p>
            </div>
          </div>
        </draggable>
      </div>
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>待测试 🗓</h6>
        <draggable
          class="draggable-list"
          :list="tasks.review"
          group="tasks"
        >
          <div v-for="(task, i) in tasks.review" :key="i">
            <div class="bg-white mt-3 p-2 shadow border rounded">
              <p>{{ task }}</p>
            </div>
          </div>
        </draggable>
      </div>
      <div class="col mx-2 px-2 py-3 bg-light border rounded">
        <h6>已完成 ✅</h6>
        <draggable class="draggable-list" :list="tasks.completed" group="tasks">
          <div v-for="(task, i) in tasks.completed" :key="i">
            <div class="bg-white mt-3 p-2 shadow border rounded">
              <p>{{ task }}</p>
            </div>
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: {
        todos: ["更新卡拉云开发文档"],
        inprogress: ["搜索组件开发", "解决容器内拖拽定位问题"],
        review: ["实现富文本编辑","解决win下滚动条显示问题"],
        completed: [],
      },
    };
  },
};
</script>

<style scoped>
h6 {
  font-weight: 700;
}
.col {
  height: 90vh;
  overflow: auto;
}
.draggable-list {
  min-height: 10vh;
}
.draggable-list > div {
  cursor: pointer;
}
</style>

运行代码，我们应该准备好看板：

04-draggable-todo

拓展阅读：《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》

六. 总结

本文主要介绍 vue.draggable 的入门搭建方法。如果不想处理前端问题，推荐使用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可快速生成。

下图为使用卡拉云搭建的内部广告投放监测系统，仅需拖拽，1小时搞定。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。

七. 一起交流

蒋川，卡拉云联合创始人，B 端数据开发。

如果你有任何问题，欢迎添加微信一起交流。我的微信 HiJiangChuan

扩展阅读：