From aa01f3b5dd20ef1c47c5a06aaa006654b559d564 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Wed, 11 Apr 2018 17:24:57 +0800
Subject: [PATCH] =?UTF-8?q?'=E5=AE=8C=E6=88=90=E6=8B=96=E6=8B=BD=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   1 +
 src/components/common/Sidebar.vue |  20 +--
 src/components/page/DragList.vue  | 213 +++++++++++++++++++++---------
 src/router/index.js               |  10 +-
 4 files changed, 163 insertions(+), 81 deletions(-)

diff --git a/package.json b/package.json
index 9350193..5529c22 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "babel-polyfill": "^6.23.0",
     "element-ui": "2.3.3",
     "mavon-editor": "^2.5.2",
+    "sortablejs": "^1.7.0",
     "vue": "^2.5.16",
     "vue-core-image-upload": "2.1.11",
     "vue-datasource": "1.0.12",
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index b947060..5deddb0 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -41,11 +41,11 @@
                         title: '常用表格',
                         subs: [
                             {
-                                index: 'basetable',
+                                index: 'table',
                                 title: '基础表格'
                             },
                             {
-                                index: 'vuetable',
+                                index: 'datasource',
                                 title: 'datasource表格'
                             }
                         ]
@@ -56,11 +56,11 @@
                         title: '表单相关',
                         subs: [
                             {
-                                index: 'baseform',
+                                index: 'form',
                                 title: '基本表单'
                             },
                             {
-                                index: 'vueeditor',
+                                index: 'editor',
                                 title: '富文本编辑器'
                             },
                             {
@@ -75,14 +75,14 @@
                     },
                     {
                         icon: 'el-icon-star-on',
-                        index: 'basecharts',
+                        index: 'charts',
                         title: 'schart图表'
                     },
-                    // {
-                    //     icon: 'el-icon-edit',
-                    //     index: 'drag',
-                    //     title: '拖拽列表'
-                    // },
+                    {
+                        icon: 'el-icon-rank',
+                        index: 'drag',
+                        title: '拖拽列表'
+                    },
                     {
                         icon: 'el-icon-warning',
                         index: 'permission',
diff --git a/src/components/page/DragList.vue b/src/components/page/DragList.vue
index d52a2b4..eb64e63 100644
--- a/src/components/page/DragList.vue
+++ b/src/components/page/DragList.vue
@@ -2,104 +2,185 @@
     <section class="main">
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
+                <el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽排序</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
-            <div class="drag-box-left">
-                <div class="drag-title">拖动排序</div>
-                <div class="drag-list" draggable="true" 
-                    v-for="list in data1" 
-                    :data-id="list.id" 
-                    @dragstart="dragstartEvent"
-                    @dragend="dragendEvent"
-                    @dragenter="dragenterEvent"
-                    @dragleave="dragleaveEvent"
-                    @dragover="dragoverEvent"
-                    :key="list.id"
-                >{{list.title}}</div>
+            <div class="drag-box">
+                <div class="drag-box-item">
+                    <div class="item-title">todo</div>
+                    <ul id="todo" class="item-ul">
+                        <li v-for="(item, index) in todo" :key="index" class="drag-list" :data-index="index">
+                            {{ item.content }}
+                        </li>
+                    </ul>
+                </div>
+                <div class="drag-box-item">
+                    <div class="item-title">doing</div>
+                    <ul id="doing" class="item-ul">
+                        <li v-for="(item, index) in doing" :key="index" class="drag-list" :data-index="index">
+                            {{ item.content }}
+                        </li>
+                    </ul>
+                </div>
+                <div class="drag-box-item">
+                    <div class="item-title">done</div>
+                    <ul id="done" class="item-ul">
+                        <li v-for="(item, index) in done" :key="index" class="drag-list" :data-index="index">
+                            {{ item.content }}
+                        </li>
+                    </ul>
+                </div>
             </div>
         </div>
     </section>
 </template>
 
 <script>
+    import Sortable from 'sortablejs';
     export default {
         data() {
             return {
+                todo: [
+                    {
+                        content: '开发图表组件'
+                    },
+                    {
+                        content: '开发拖拽组件'
+                    },
+                    {
+                        content: '开发权限测试组件'
+                    }
+                ],
+                doing: [
+                    {
+                        content: '开发登录注册页面'
+                    },
+                    {
+                        content: '开发头部组件'
+                    },
+                    {
+                        content: '开发表格相关组件'
+                    },
+                    {
+                        content: '开发表单相关组件'
+                    }
+                ],
+                done:[
+                    {
+                        content: '初始化项目，生成工程目录，完成相关配置'
+                    },
+                    {
+                        content: '开发项目整体框架'
+                    }
+                ],
                 dragElement: null,
                 lock: true,
-                data1: [
-                    {id: 1, title: '这里是列表1的标题'},
-                    {id: 2, title: '这里是列表2的标题'},
-                    {id: 3, title: '这里是列表3的标题'},
-                    {id: 4, title: '这里是列表4的标题'},
-                    {id: 5, title: '这里是列表5的标题'},
-                    {id: 6, title: '这里是列表6的标题'},
-                    {id: 7, title: '这里是列表7的标题'}
-                ],
-                data2: [
-                    {id: 1, title: '这里是列表11的标题'},
-                    {id: 2, title: '这里是列表12的标题'},
-                    {id: 3, title: '这里是列表13的标题'},
-                    {id: 4, title: '这里是列表14的标题'}
-                ]
+
             }
         },
         methods: {
-            dragstartEvent(ev) {
-                this.dragElement = ev.target;
-                ev.target.style.backgroundColor = '#f8f8f8';
-            },
-            dragendEvent(ev) {
-                ev.target.style.backgroundColor = '#fff';
-                ev.preventDefault();
-            },
-            dragenterEvent(ev) {
-                if(this.dragElement != ev.target){
-                    ev.target.parentNode.insertBefore(this.dragElement, ev.target);
-                }
-            },
-            dragleaveEvent(ev) {
-                if(this.dragElement != ev.target){
-                    if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
-                        ev.target.parentNode.appendChild(this.dragElement);
-                        this.lock = false;
-                    }else{
-                        this.lock = true;
+            initSortable(id, vm){
+                let list = document.getElementById(id);
+                Sortable.create(list, {
+                    group: {
+                        name: 'list',
+                        pull: true
+                    },
+                    ghostClass: 'placeholder-style',
+                    animation: 120,
+                    scroll: true,
+                    onRemove(event) {
+                        let content;
+                        const idx = event.item.getAttribute('data-index');
+                        if(event.from.id === 'todo'){
+                            content = vm.todo[idx];
+                        }else if(event.from.id === 'doing'){
+                            content = vm.doing[idx];
+                        }else if(event.from.id === 'done'){
+                            content = vm.done[idx];
+                        }
+                        if(event.to.id === 'todo'){
+                            vm.todo.splice(event.newIndex, 0, content);
+                        }else if(event.to.id === 'doing'){
+                            vm.doing.splice(event.newIndex, 0, content);
+                        }else if(event.to.id === 'done'){
+                            vm.done.splice(event.newIndex, 0, content);
+                        }
+                    },
+                    onEnd(event){
+                        if(event.to.id === event.from.id){
+                            event.item.removeAttribute('draggable');
+                        }
                     }
-                }
-            },
-            dragoverEvent(ev) {
-                ev.preventDefault();
+                });
             }
+        },
+        mounted() {
+            document.body.ondrop = function (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            };
+            let vm = this;
+            this.initSortable('todo', this);
+            this.initSortable('doing', this);
+            this.initSortable('done', this);
         }
     }
+
 </script>
 
 <style scoped>
-    .drag-box-left{
-        float: left;
-        width: 45%;
+    .drag-box{
+        display: flex;
+        user-select: none;
     }
-    .drag-box-right{
-        float: right;
-        width: 45%;
+    .drag-box-item {
+        flex: 1;
+        max-width: 330px;
+        min-width: 300px;
+        background-color: #eff1f5;
+        margin-right: 16px;
+        border-radius: 6px;
+        border: 1px #e1e4e8 solid;
     }
-    .drag-list{
-        border: 1px solid #ddd;
-        padding:10px;
-        margin-bottom: 20px;
-        transition: border .3s;
+    .item-title{
+        padding: 8px 8px 8px 12px;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #24292e;
+        font-weight: 600;
     }
-    .drag-list:hover{
+    .item-ul{
+        padding: 0 8px 8px;
+        height: 600px;
+        overflow-y: scroll;
+    }
+    .item-ul::-webkit-scrollbar{
+        width: 0;
+    }
+    .drag-list {
+        border: 1px #e1e4e8 solid;
+        padding: 10px;
+        margin: 5px 0 10px;
+        list-style: none;
+        background-color: #fff;
+        border-radius: 6px;
+        cursor: pointer;
+        -webkit-transition: border .3s ease-in;
+        transition: border .3s ease-in;
+    }
+    .drag-list[draggable="false"]{
+        display: none;
+    }
+    .drag-list:hover {
         border: 1px solid #20a0ff;
     }
-    .drag-title{
+    .drag-title {
         font-weight: 400;
         line-height: 25px;
         margin: 10px 0;
         font-size: 22px;
         color: #1f2f3d;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 28849f4..95588c7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,21 +18,21 @@ export default new Router({
                     component: resolve => require(['../components/page/Readme.vue'], resolve)
                 },
                 {
-                    path: '/basetable',
+                    path: '/table',
                     component: resolve => require(['../components/page/BaseTable.vue'], resolve)
                 },
                 {
                     // vue-datasource组件
-                    path: '/vuetable',
+                    path: '/datasource',
                     component: resolve => require(['../components/page/VueTable.vue'], resolve)     
                 },
                 {
-                    path: '/baseform',
+                    path: '/form',
                     component: resolve => require(['../components/page/BaseForm.vue'], resolve)
                 },
                 {
                     // Vue-Quill-Editor组件
-                    path: '/vueeditor',
+                    path: '/editor',
                     component: resolve => require(['../components/page/VueEditor.vue'], resolve)    
                 },
                 {
@@ -47,7 +47,7 @@ export default new Router({
                 },
                 {
                     // vue-schart组件
-                    path: '/basecharts',
+                    path: '/charts',
                     component: resolve => require(['../components/page/BaseCharts.vue'], resolve)   
                 },
                 {