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

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年03月04日

最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐

在 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>

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

04-01-draggable-todo

接下来,我们要在该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小时搞定。

09-kalacloud

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

七. 一起交流

wechat-jiangchuan

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

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

扩展阅读: