'使用vuedraggable代替sortablejs'

Author: lin-xin

package.json

@@ -14,13 +14,13 @@
     "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",
     "vue-quill-editor": "3.0.6",
     "vue-router": "^3.0.1",
-    "vue-schart": "^0.1.4"
+    "vue-schart": "^0.1.4",
+    "vuedraggable": "^2.16.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/page/DragList.vue

@@ -9,38 +9,49 @@
             <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>
+                    <draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
+                        <transition-group tag="div" id="todo" class="item-ul">
+                            <div v-for="(item,index) in todo" class="drag-list" :key="index">
+                                {{item.content}}
+                            </div>
+                        </transition-group>
+                    </draggable>
                 </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>
+                    <draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
+                        <transition-group tag="div" id="doing" class="item-ul">
+                            <div v-for="(item,index) in doing" class="drag-list" :key="index">
+                                {{item.content}}
+                            </div>
+                        </transition-group>
+                    </draggable>
                 </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>
+                    <draggable v-model="done" @remove="removeHandle" :options="dragOptions">
+                        <transition-group tag="div" id="done" class="item-ul">
+                            <div v-for="(item,index) in done" class="drag-list" :key="index">
+                                {{item.content}}
+                            </div>
+                        </transition-group>
+                    </draggable>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
 <script>
-    import Sortable from 'sortablejs';
+    import draggable from 'vuedraggable'
     export default {
         data() {
             return {
+                dragOptions:{
+                    animation: 120,
+                    group: 'sortlist',
+                    ghostClass: 'ghost-style'
+                },
                 todo: [
                     {
                         content: '开发图表组件'
@@ -73,58 +84,17 @@
                     {
                         content: '开发项目整体框架'
                     }
-                ],
-                dragElement: null,
-                lock: true,
-
+                ]
             }
         },
+        components:{
+            draggable
+        },
         methods: {
-            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');
-                        }
-                    }
-                });
+            removeHandle(event){
+                console.log(event);
+                this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
             }
-        },
-        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);
         }
     }
 
@@ -170,9 +140,6 @@
         -webkit-transition: border .3s ease-in;
         transition: border .3s ease-in;
     }
-    .drag-list[draggable="false"]{
-        display: none;
-    }
     .drag-list:hover {
         border: 1px solid #20a0ff;
     }
@@ -183,4 +150,9 @@
         font-size: 22px;
         color: #1f2f3d;
     }
+    .ghost-style{
+        display: block;
+        color: transparent;
+        border-style: dashed
+    }
 </style>

src/components/page/VueTable.vue

@@ -2,7 +2,7 @@
     <div class="table">
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
+                <el-breadcrumb-item><i class="el-icon-tickets"></i> 表格</el-breadcrumb-item>
                 <el-breadcrumb-item>VueDatasource</el-breadcrumb-item>
             </el-breadcrumb>
         </div>

src/router/index.js

@@ -31,7 +31,7 @@ export default new Router({
                     component: resolve => require(['../components/page/BaseForm.vue'], resolve)
                 },
                 {
-                    // Vue-Quill-Editor组件
+                    // 富文本编辑器组件
                     path: '/editor',
                     component: resolve => require(['../components/page/VueEditor.vue'], resolve)    
                 },
@@ -41,7 +41,7 @@ export default new Router({
                     component: resolve => require(['../components/page/Markdown.vue'], resolve)     
                 },
                 {
-                    // Vue-Core-Image-Upload组件
+                    // 图片上传组件
                     path: '/upload',
                     component: resolve => require(['../components/page/Upload.vue'], resolve)       
                 },