diff --git a/package.json b/package.json
index c83648a..5b28de9 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "viser-vue": "^2.2.5",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
+    "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/components/task/Index.vue b/src/components/task/Index.vue
new file mode 100644
index 0000000..e5ecd44
--- /dev/null
+++ b/src/components/task/Index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div style="display: flex">
+    <task-card style="margin: 0 48px" title="ToDo">
+      <draggable :options="{group: 'a', sort: true, scroll: true, scrollSpeed: 2, animation: 250, ghostClass: 'ghost', chosenClass: 'chose'}">
+        <task-item :key="index" v-for="(item, index) in todoList" :content="item" />
+      </draggable>
+    </task-card>
+    <task-card style="margin: 0 48px" title="In Progress">
+      <draggable :options="{group: 'a', sort: true, scroll: true, scrollSpeed: 2, animation: 250, ghostClass: 'ghost', chosenClass: 'chose'}">
+        <task-item :key="index" v-for="(item, index) in inproList" :content="item" />
+      </draggable>
+    </task-card>
+    <task-card style="margin: 0 48px" title="Done">
+      <draggable :options="{group: 'a', sort: true, scroll: true, scrollSpeed: 2, animation: 250, ghostClass: 'ghost', chosenClass: 'chose'}">
+        <task-item :key="index" v-for="(item, index) in doneList" :content="item" />
+      </draggable>
+    </task-card>
+  </div>
+</template>
+
+<script>
+import TaskCard from './TaskCard'
+import TaskItem from './TaskItem'
+import Draggable from 'vuedraggable'
+const todoList = ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
+const inproList = ['任务七', '任务八', '任务九', '任务十', '任务十一', '任务十二']
+const doneList = ['任务十三', '任务十四', '任务十五', '任务十六', '任务十七', '任务十八']
+export default {
+  name: 'Index',
+  components: {TaskItem, TaskCard, Draggable},
+  data () {
+    return {
+      todoList,
+      inproList,
+      doneList
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .ghost{
+    background-color: rgba(256, 256, 256, 0.5);
+  }
+  .chose{
+    border: 1px dashed #aaaaaa;
+  }
+</style>
diff --git a/src/components/task/TaskCard.vue b/src/components/task/TaskCard.vue
new file mode 100644
index 0000000..97db0d5
--- /dev/null
+++ b/src/components/task/TaskCard.vue
@@ -0,0 +1,38 @@
+<template>
+    <a-card class="task-card" size="large" :title="title" :bordered="false" :bodyStyle="{backgroundColor: '#e1e4e8'}">
+      <div slot="extra">
+        <a-icon class="add" type="plus" draggable="true"/>
+        <a-icon class="more" style="margin-left: 8px" type="ellipsis" />
+      </div>
+      <slot></slot>
+    </a-card>
+</template>
+
+<script>
+import ACard from 'ant-design-vue/es/card/Card'
+import AIcon from 'ant-design-vue/es/icon/icon'
+export default {
+  name: 'TaskCard',
+  components: {AIcon, ACard},
+  props: ['title'],
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .task-card{
+    width: 33.33%;
+    font-size: 24px;
+    font-weight: bolder;
+    background-color: #e1e4e8;
+    .add{
+      cursor: pointer;
+    }
+    .more{
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/src/components/task/TaskItem.vue b/src/components/task/TaskItem.vue
new file mode 100644
index 0000000..0dca8a0
--- /dev/null
+++ b/src/components/task/TaskItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <a-card class="task-item" type="inner">
+    {{content}}
+  </a-card>
+</template>
+
+<script>
+import ACard from 'ant-design-vue/es/card/Card'
+export default {
+  name: 'TaskItem',
+  props: ['content'],
+  components: {ACard}
+}
+</script>
+
+<style lang="less" scoped>
+  .task-item{
+    margin-bottom: 16px;
+    transition: all .3s;
+    & :hover{
+      cursor: move;
+    }
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 9871140..2df399e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,7 @@ import WorkPlace from '@/components/dashboard/WorkPlace'
 import Login from '@/components/login/Login'
 import BasicDetail from '@/components/detail/BasicDetail'
 import AdvancedDetail from '@/components/detail/AdvancedDetail'
+import TaskCard from '@/components/task/Index'
 
 Vue.use(Router)
 
@@ -205,6 +206,21 @@ export default new Router({
               component: ServerError
             }
           ]
+        },
+        {
+          path: '/components',
+          redirect: '/components/taskcard',
+          name: '小组件',
+          icon: 'appstore',
+          component: PageView,
+          children: [
+            {
+              path: '/components/taskcard',
+              name: '任务卡片',
+              icon: 'none',
+              component: TaskCard
+            }
+          ]
         }
       ]
     }
diff --git a/yarn.lock b/yarn.lock
index 4862c42..b208a69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7646,6 +7646,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@^1.7.0:
+  version "1.7.0"
+  resolved "http://registry.npm.taobao.org/sortablejs/download/sortablejs-1.7.0.tgz#80a2b2370abd568e1cec8c271131ef30a904fa28"
+
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -8530,6 +8534,12 @@ vue@^2.5.3:
   version "2.5.16"
   resolved "http://registry.npm.taobao.org/vue/download/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 
+vuedraggable@^2.16.0:
+  version "2.16.0"
+  resolved "http://registry.npm.taobao.org/vuedraggable/download/vuedraggable-2.16.0.tgz#52127081a2adb3de5fabd214d404ff3eee63575a"
+  dependencies:
+    sortablejs "^1.7.0"
+
 vuex@^3.0.1:
   version "3.0.1"
   resolved "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"