在 Vue 中,组件拖拽功能非常难写,有大量的深坑藏在里面。当然也有非常多的第三方库帮你实现拖拽功能,其中最棒的拖拽组件库就是 vue.draggable 了,本文将带领大家学习如何使用 vue.draggable 搭建一套任务看板,最终我们实现任务条在四个容器中来回拖拽的效果。
跟随本教程学习,最终你的学习成果:
如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 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
在浏览器里应该能看到以下输出:
拓展阅读:《最好用的 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>
运行上面的代码,您的浏览器中应该有以下输出:
拓展阅读:《订单管理系统(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
)
拓展阅读:《最好用的 7 个 Vue Tree select 树形组件》

调试 draggable 拖拽太麻烦?
五. 使用 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>
运行代码,我们应该准备好看板:
拓展阅读:《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》
六. 总结
本文主要介绍 vue.draggable 的入门搭建方法。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。
下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽,1小时搞定。
卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云。
七. 一起交流
蒋川,卡拉云联合创始人,B 端数据开发。
如果你有任何问题,欢迎添加微信一起交流。我的微信 HiJiangChuan
扩展阅读: