添加拖拽列表组件DropList

package-lock.json

@@ -14279,6 +14279,14 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.16.0.tgz",
+      "integrity": "sha512-fr9gcWKXMJlzbbtJcrQs4kU7qdOZqd4SEpAcx+r0nykbW8AygZN0aKVpadEtI53T8A2azhzCdXMvEqrLuKE2fA==",
+      "requires": {
+        "sortablejs": "1.7.0"
+      }
+    },
     "vuex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "vue": "^2.5.10",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.1",
+    "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1",
     "wangeditor": "^3.1.1",
     "xlsx": "^0.13.3"

src/api/data.js

@@ -6,3 +6,10 @@ export const getTableData = () => {
     method: 'get'
   })
 }
+
+export const getDragList = () => {
+  return axios.request({
+    url: 'get_drag_list',
+    method: 'get'
+  })
+}

src/components/drag-list/drag-list.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="drag-list-wrapper">
+    <div class="drag-list-con con1">
+      <slot name="left-title"></slot>
+      <draggable class="drop-box1" :class="dropConClass.left" :options="options" :value="list1" @input="handleListChange($event, 'left')" @end="handleEnd($event, 'left')">
+        <div class="drag-list-item" v-for="(itemLeft, index) in list1" :key="`drag_li1_${index}`">
+          <slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot>
+        </div>
+      </draggable>
+    </div>
+    <div class="drag-list-con con2">
+      <slot name="right-title"></slot>
+      <draggable class="drop-box2" :class="dropConClass.right" :options="options" :value="list2" @input="handleListChange($event, 'right')" @end="handleEnd($event, 'right')">
+        <div class="drag-list-item" v-for="(itemRight, index) in list2" :key="`drag_li2_${index}`">
+          <slot name="right" :itemRight="itemRight">{{ itemRight }}</slot>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+export default {
+  name: 'DragList',
+  components: {
+    draggable
+  },
+  props: {
+    list1: {
+      type: Array,
+      required: true
+    },
+    list2: {
+      type: Array,
+      default: () => []
+    },
+    dropConClass: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      options: { group: 'drag_list' }
+    }
+  },
+  methods: {
+    handleListChange (value, type) {
+      if (type === 'left') this.$emit('update:list1', value)
+      else this.$emit('update:list2', value)
+    },
+    handleEnd (event, type) {
+      const srcClassName = (event.srcElement || event.target).classList[0]
+      const targetClassName = event.to.classList[0]
+      let src = ''
+      let target = ''
+      if (srcClassName === targetClassName) {
+        if (type === 'left') {
+          src = 'left'
+          target = 'left'
+        } else {
+          src = 'right'
+          target = 'right'
+        }
+      } else {
+        if (type === 'left') {
+          src = 'left'
+          target = 'right'
+        } else {
+          src = 'right'
+          target = 'left'
+        }
+      }
+      this.$emit('on-change', {
+        src: src,
+        target: target,
+        oldIndex: event.oldIndex,
+        newIndex: event.newIndex
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.drag-list-wrapper{
+  height: 100%;
+  .drag-list-con{
+    width: 50%;
+    float: left;
+  }
+}
+</style>

src/components/drag-list/index.js

@@ -0,0 +1,2 @@
+import DragList from './drag-list.vue'
+export default DragList

src/mock/data.js

@@ -1,5 +1,6 @@
 import Mock from 'mockjs'
 import { doCustomTimes } from '@/libs/util'
+const Random = Mock.Random
 
 export const getTableData = req => {
   let tableData = []
@@ -16,3 +17,18 @@ export const getTableData = req => {
     msg: ''
   }
 }
+
+export const getDragList = req => {
+  let dragList = []
+  doCustomTimes(5, () => {
+    dragList.push(Mock.mock({
+      name: Random.csentence(10, 13),
+      id: Random.increment(10)
+    }))
+  })
+  return {
+    code: 200,
+    data: dragList,
+    msg: ''
+  }
+}

src/mock/index.js

@@ -1,11 +1,12 @@
 import Mock from 'mockjs'
 import { login, logout, getUserInfo } from './login'
-import { getTableData } from './data'
+import { getTableData, getDragList } from './data'
 
 // 登录相关和获取用户信息
 Mock.mock(/\/login/, login)
 Mock.mock(/\/get_info/, getUserInfo)
 Mock.mock(/\/logout/, logout)
 Mock.mock(/\/get_table_data/, getTableData)
+Mock.mock(/\/get_drag_list/, getDragList)
 
 export default Mock

src/router/routers.js

@@ -86,6 +86,15 @@ export default [
         },
         component: () => import('@/view/components/count-to/count-to.vue')
       },
+      {
+        path: 'drag_list_page',
+        name: 'drag_list_page',
+        meta: {
+          icon: 'md-trending-up',
+          title: '拖拽列表'
+        },
+        component: () => import('@/view/components/drag-list/drag-list.vue')
+      },
       {
         path: 'tables_page',
         name: 'tables_page',

src/view/components/drag-list/drag-list.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <Card>
+      <div class="drag-box-card">
+        <drag-list :list1.sync="list1" :list2.sync="list2" :dropConClass="dropConClass" @on-change="handleChange">
+          <h3 slot="left-title">待办事项</h3>
+          <Card class="drag-item" slot="left" slot-scope="left">{{ left.itemLeft.name }}</Card>
+          <h3 slot="right-title">完成事项</h3>
+          <Card class="drag-item" slot="right" slot-scope="right">{{ right.itemRight.name }}</Card>
+        </drag-list>
+      </div>
+      <div class="handle-log-box">
+        <h3>操作记录</h3>
+        <div class="handle-inner-box">
+          <p v-for="(item, index) in handleList" :key="`handle_item_${index}`">{{ item }}</p>
+        </div>
+      </div>
+      <div class="res-show-box">
+        <pre>{{ list1 }}</pre>
+      </div>
+      <div class="res-show-box">
+        <pre>{{ list2 }}</pre>
+      </div>
+    </Card>
+  </div>
+</template>
+<script>
+import DragList from '_c/drag-list'
+import { getDragList } from '@/api/data'
+export default {
+  name: 'drag_list_page',
+  components: {
+    DragList
+  },
+  data () {
+    return {
+      list1: [],
+      list2: [],
+      dropConClass: {
+        left: ['drop-box', 'left-drop-box'],
+        right: ['drop-box', 'right-drop-box']
+      },
+      handleList: []
+    }
+  },
+  methods: {
+    handleChange ({ src, target, oldIndex, newIndex }) {
+      this.handleList.push(`${src} => ${target}, ${oldIndex} => ${newIndex}`)
+    }
+  },
+  mounted () {
+    getDragList().then(res => {
+      this.list1 = res.data
+      this.list2 = [res.data[0]]
+    })
+  }
+}
+</script>
+<style lang="less">
+.drag-box-card{
+  display: inline-block;
+  width: 600px;
+  height: 560px;
+  .drag-item{
+    margin: 10px;
+  }
+  h3{
+    padding: 10px 15px;
+  }
+  .drop-box{
+    border: 1px solid #eeeeee;
+    height: 455px;
+    border-radius: 5px;
+  }
+  .left-drop-box{
+    margin-right: 10px;
+  }
+  .right-drop-box{
+    //
+  }
+}
+.handle-log-box{
+  display: inline-block;
+  margin-left: 20px;
+  border: 1px solid #eeeeee;
+  vertical-align: top;
+  width: 200px;
+  height: 500px;
+  h3{
+    padding: 10px 14px;
+  }
+  .handle-inner-box{
+    height: ~"calc(100% - 44px)";
+    overflow: auto;
+    p{
+      padding: 14px 0;
+      margin: 0 14px;
+      border-bottom: 1px dashed #eeeeee;
+    }
+  }
+}
+.res-show-box{
+  display: inline-block;
+  margin-left: 20px;
+  border: 1px solid #eeeeee;
+  vertical-align: top;
+  width: 350px;
+  height: 570px;
+}
+</style>