vuedraggable能实现自由拖拽功能吗?_用Vue快速创建前端Kanban功能原型

原来一直使用trello做小团队的事务管理，后由于公司数据保密要求，trello禁用了，没有trello那么我们就自己写一个，本文通过使用vue，快速实现了一个简单的可拖拽的Kanban前端原型。

使用框架：vue, bootstrap-vue, vuedraggable

配置环境

vue create vue-kanban //创建vue-kanban项目，选择默认vue2版本cd vue-kanbannpm i bootstrap-vue vuedraggable//为项目安装bootstrap-vue与vuedraggable依赖包

修改 main.js

添加bootstrap依赖，在import部分添加两两行

import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'

并在下方通过Vue全局挂载

// Install BootstrapVueVue.use(BootstrapVue)// Optionally install the BootstrapVue icon components pluginVue.use(IconsPlugin)

最终main.js生成为

import Vue from 'vue'import App from './App.vue'import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'Vue.config.productionTip = false// Install BootstrapVueVue.use(BootstrapVue)// Optionally install the BootstrapVue icon components pluginVue.use(IconsPlugin)new Vue({  render: h => h(App),}).$mount('#app')

新建kanban组件

第一步是建立一个列框架，并带上列标题

Backlog

这段代码效果就是做出了一个列块，效果如下：

但是列表没有内容，怎么办呢？那么接下来我们需要为列表添加一些初始数据，在