Add draglist

package.json

@@ -15,7 +15,7 @@
     "element-ui": "1.3.1",
     "mockjs": "^1.0.1-beta3",
     "vue": "^2.3.2",
-    "vue-core-image-upload": "2.1.5",
+    "vue-core-image-upload": "2.1.11",
     "vue-datasource": "1.0.9",
     "vue-echarts-v3": "1.0.3",
     "vue-quill-editor": "2.1.6",

src/App.vue

@@ -5,6 +5,6 @@
 </template>
 <style>
     @import "../static/css/main.css";
-    @import "../static/css/color-dark.css";     /*深色主题*/
+    /*@import "../static/css/color-dark.css";     深色主题*/
-    /*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
+    @import "../static/css/theme-green/color-green.css";   /*浅绿色主题*/
 </style>

src/components/common/Sidebar.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="sidebar">
-        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
+        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>
             <template v-for="item in items">
                 <template v-if="item.subs">
                     <el-submenu :index="item.index">
-                        <template slot="title"><i class="el-icon-menu"></i>{{ item.title }}</template>
+                        <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
                         <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                         </el-menu-item>
                     </el-submenu>
                 </template>
                 <template v-else>
                     <el-menu-item :index="item.index">
-                        <i class="el-icon-setting"></i>{{ item.title }}
+                        <i :class="item.icon"></i>{{ item.title }}
                     </el-menu-item>
                 </template>
             </template>
@@ -25,10 +25,12 @@
             return {
                 items: [
                     {
+                        icon: 'el-icon-setting',
                         index: 'readme',
                         title: '自述'
                     },
                     {
+                        icon: 'el-icon-menu',
                         index: '2',
                         title: '表格',
                         subs: [
@@ -43,6 +45,7 @@
                         ]
                     },
                     {
+                        icon: 'el-icon-date',
                         index: '3',
                         title: '表单',
                         subs: [
@@ -65,18 +68,14 @@
                         ]
                     },
                     {
-                        index: '4',
+                        icon: 'el-icon-star-on',
-                        title: '图表',
-                        subs: [
-                            {
                         index: 'basecharts',
-                                title: '基础图表'
+                        title: '图表'
                     },
                     {
-                                index: 'mixcharts',
+                        icon: 'el-icon-upload2',
-                                title: '混合图表'
+                        index: 'drag',
-                            }
+                        title: '拖拽'
-                        ]
                     }
                 ]
             }

src/components/page/BaseCharts.vue

@@ -10,6 +10,7 @@
             vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
             访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
         </div>
+        <div class="content-title">基础图表</div>
         <div class="echarts">
             <IEcharts :option="line" ></IEcharts>
         </div>
@@ -22,11 +23,23 @@
         <div class="echarts">
             <IEcharts :option="pie_radius" ></IEcharts>
         </div>
+        <div class="content-title">混合图表</div>
+        <div class="mix-echarts">
+            <IEcharts :option="mix" ></IEcharts>
+        </div>
     </div>
 </template>
 
 <script>
-    import IEcharts from 'vue-echarts-v3';
+    // import IEcharts from 'vue-echarts-v3';
+    import IEcharts from 'vue-echarts-v3/src/lite.vue';
+  
+    import 'echarts/lib/chart/bar';
+    import 'echarts/lib/chart/line';
+    import 'echarts/lib/chart/pie';
+    import 'echarts/lib/component/legend';
+    import 'echarts/lib/component/tooltip';
+    import 'echarts/lib/component/title';
     export default {
         components: {
             IEcharts
@@ -140,6 +153,33 @@
                         }
                     }
                 ]
+            },
+            mix:{
+                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
+                    legend: {
+                        data:['步步高','小天才','imoo']
+                    },
+                    xAxis: {
+                        data: ['周一','周二','周三','周四','周五','周末']
+                    },
+                    yAxis:{},
+                    series: [
+                        {
+                            name: "步步高",
+                            type: "line",
+                            data: [15, 20, 26, 30, 40, 27]
+                        },
+                        {
+                            name: "小天才",
+                            type: "bar",
+                            data: [5, 30, 36, 10, 34, 20]
+                        },
+                        {
+                            name: "imoo",
+                            type: "bar",
+                            data: [35, 40, 30, 50, 60, 40]
+                        }
+                    ]
                 }
         })
     }
@@ -151,4 +191,16 @@
         width: 500px;
         height: 400px;
     }
+    .content-title{
+        clear: both;
+        font-weight: 400;
+        line-height: 50px;
+        margin: 10px 0;
+        font-size: 22px;
+        color: #1f2f3d;
+    }
+    .mix-echarts{
+        width:900px;
+        height:600px;
+    }
 </style>

src/components/page/DragList.vue

@@ -0,0 +1,118 @@
+<template>
+    <section class="main">
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <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"
+            >{{list.title}}</div>
+        </div>
+        <div class="drag-box-right">
+            <div class="drag-title">已完成</div>
+            <div class="drag-list" draggable="true"
+                v-for="list in data2"
+                :data-id="list.id"
+                @dragstart="dragstartEvent"
+                @dragend="dragendEvent"
+                @dragenter="dragenterEvent"
+                @dragleave="dragleaveEvent"
+                @dragover="dragoverEvent"
+            >{{list.title}}</div>
+        </div>
+        
+    </section>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                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) {
+                const self = this;
+                self.dragElement = ev.target;
+                ev.target.style.backgroundColor = '#f8f8f8';
+            },
+            dragendEvent(ev) {
+                ev.target.style.backgroundColor = '#fff';
+                ev.preventDefault();
+            },
+            dragenterEvent(ev) {
+                const self = this;
+                if(self.dragElement != ev.target){
+                    ev.target.parentNode.insertBefore(self.dragElement, ev.target);
+                }
+            },
+            dragleaveEvent(ev) {
+                const self = this;
+                if(self.dragElement != ev.target){
+                    if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
+                        ev.target.parentNode.appendChild(self.dragElement);
+                        self.lock = false;
+                    }else{
+                        self.lock = true;
+                    }
+                }
+            },
+            dragoverEvent(ev) {
+                ev.preventDefault();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .drag-box-left{
+        float: left;
+        width: 45%;
+    }
+    .drag-box-right{
+        float: right;
+        width: 45%;
+    }
+    .drag-list{
+        border: 1px solid #ddd;
+        padding:20px;
+        margin-bottom: 20px;
+        transition: border .3s;
+    }
+    .drag-list:hover{
+        border: 1px solid #20a0ff;
+    }
+    .drag-title{
+        font-weight: 400;
+        line-height: 50px;
+        margin: 10px 0;
+        font-size: 22px;
+        color: #1f2f3d;
+    }
+</style>

src/components/page/MixCharts.vue

@@ -1,64 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
-                <el-breadcrumb-item>混合图表</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="plugins-tips">
-            vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
-            访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
-        </div>
-        <div class="mix-echarts">
-            <IEcharts :option="mix" ></IEcharts>
-        </div>
-    </div>
-</template>
-
-<script>
-    import IEcharts from 'vue-echarts-v3';
-    export default {
-        data: function(){
-            return {
-                mix:{
-                    color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
-                    legend: {
-                        data:['步步高','小天才','imoo']
-                    },
-                    xAxis: {
-                        data: ['周一','周二','周三','周四','周五','周末']
-                    },
-                    yAxis:{},
-                    series: [
-                        {
-                            name: "步步高",
-                            type: "line",
-                            data: [15, 20, 26, 30, 40, 27]
-                        },
-                        {
-                            name: "小天才",
-                            type: "bar",
-                            data: [5, 30, 36, 10, 34, 20]
-                        },
-                        {
-                            name: "imoo",
-                            type: "bar",
-                            data: [35, 40, 30, 50, 60, 40]
-                        }
-                    ]
-                }
-            }
-        },
-        components: {
-            IEcharts
-        }
-    }
-</script>
-
-<style scoped>
-    .mix-echarts{
-        width:900px;
-        height:600px;
-    }
-</style>

src/components/page/Upload.vue

@@ -12,16 +12,12 @@
             访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
         </div>
         <el-upload
+            class="upload-demo"
+            drag
             action="/api/posts/"
-                type="drag"
+            multiple>
-                :thumbnail-mode="true"
-                :on-preview="handlePreview"
-                :on-remove="handleRemove"
-                :on-error="handleError"
-                :default-file-list="fileList"
-        >
             <i class="el-icon-upload"></i>
-            <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
             <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
         </el-upload>
         <div class="content-title">支持裁剪</div>
@@ -56,12 +52,6 @@
             imageuploaded(res) {
                 console.log(res)
             },
-            handleRemove(file, fileList) {
-                console.log(file, fileList);
-            },
-            handlePreview(file) {
-                console.log(file);
-            },
             handleError(){
                 this.$notify.error({
                     title: '上传失败',

src/main.js

@@ -3,10 +3,11 @@ import App from './App';
 import router from './router';
 import axios from 'axios';
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-default/index.css';    // 默认主题
+// import 'element-ui/lib/theme-default/index.css';    // 默认主题
-// import '../static/css/theme-green/index.css';       // 浅绿色主题
+import '../static/css/theme-green/index.css';       // 浅绿色主题
 import "babel-polyfill";
 import './mock/index.js';
+
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
 new Vue({

src/router/index.js

@@ -46,8 +46,8 @@ export default new Router({
                     component: resolve => require(['../components/page/BaseCharts.vue'], resolve)   // vue-echarts-v3组件
                 },
                 {
-                    path: '/mixcharts',
+                    path: '/drag',
-                    component: resolve => require(['../components/page/MixCharts.vue'], resolve)    // vue-echarts-v3组件
+                    component: resolve => require(['../components/page/DragList.vue'], resolve)    // 拖拽列表组件
                 }
             ]
         },