vuedraggable能实现自由拖拽功能吗?_超棒 Vue 拖拽看板待办事项管理Vue-TodoList

今天给大家分享一个超给力的Vue待办事项任务管理VueTodoList。

todo-list 基于vue构建的待办事项任务看板。实现基本功能组件、数据动态化处理、待办事项分组、多人协同处理等功能。

大家对这种协同办公待办事项看板应该并不陌生。最基本的有Doing、Todo、Done等功能。

比如在项目进度管理、bug处理、运营反馈等场景可能用的比较多。

技术栈

• 状态持久化管理：Vue+Vuex+localStorage
• 拖拽插件：vuedraggable: ^2.21.0
• 搭建服务端数据管理：Node+axios+Express+Mysql
• 协同任务处理：Socket.io

快速安装

# 克隆项目git clone https://github.com/javanf/todo-list.git# 进入目录cd todo-list# 安装依赖npm install# 本地开发npm run dev

大家可以先倒腾一些简单的，然后再拓展一些复杂的功能，如下面这种Teambition、WorkTile看板。

拖拽功能使用的是Vue.Draggable组件，star高达13.3K+。

https://github.com/SortableJS/Vue.Draggable

大家也可以发挥自己的想象力做出一些有趣的功能，比如下面这个衣橱收藏。

# 仓库地址https://github.com/javanf/todo-list

ok，就分享到这里。大家如果有兴趣可以去看下哈~ 欢迎一起交流讨论！