antd-vue 表格拖拽相关（转载的）

<template>
  <div class="approvalStyle">
    <draggle v-model="draggleList" @end="end" @start="start">
      <transition-group>
        <div class="listStyle" v-for="item in draggleList" :key="item.value">{{ item.name }}</div>
      </transition-group>
    </draggle>

    <a-table style="margin-top:20px;background:#fff" :columns="columns" :dataSource="dataSource" :customRow="customRow">
    </a-table>

  </div>
</template>

<script>
import draggle from 'vuedraggable'
export default {
  name: 'JMapApprovalMessage',
  components: {
    draggle
  },
  data () {
    return {
      changDragg: [],
      tempArr: [],
      draggleList: [
        {
          name: 'caltaLog',
          value: '1',
          orderNum: '1'
        },
        {
          name: 'implelist',
          value: '2',
          orderNum: '2'
        },
        {
          name: 'coming',
          value: '3',
          orderNum: '3'
        }
      ],
      columns: [
        {
          dataIndex: 'name',
          title: 'name'
        },
        {
          dataIndex: 'address',
          title: 'address'
        },
        {
          dataIndex: 'age',
          title: 'age'
        }
      ],
      dataSource: [
        {
          name: '张三',
          age: 14,
          address: '北京',
          key: 3
        },
        {
          name: '李四',
          age: 15,
          address: '南京',
          key: 2
        },
        {
          name: '王五',
          age: 16,
          address: '东京',
          key: 1
        }
      ]
    }
  },
  created () {
    this.draggleList.map(item => {
      this.tempArr.push(item.orderNum)
    })
    this.tempArr.sort((a, b) => a - b)
    console.log(this.tempArr)
  },
  methods: {
    start (e) {
      console.log(e, 'start')
    },
    end (e) {
      this.draggleList.map((item, index) => {
        if (item.orderNum !== this.tempArr[index]) {
          item.orderNum = this.tempArr[index]
          this.changDragg.map((element, j) => {
            if (item.key === element.key) {
              this.tempArr.splice(j - 1)
            }
          })
          this.changDragg.push(item)
        }
      })
      console.log(this.draggleList)
      console.log(this.changDragg, 'mydraggleList')
    },
    // 拖动排序
    customRow (record, index) {
      return {
        // FIXME: draggable： true 不生效还不晓得是什么原因，先使用鼠标移入事件设置目标行的draggable属性
        props: {
        // draggable: 'true'
        },
        style: {
          cursor: 'pointer'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceObj = record
            console.log(this.sourceObj, 'source')
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetObj = record
            console.log(this.targetObj, 'target')
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .approvalStyle{
    .listStyle{
      font-size: 16px;
      padding: 20px;
      background: #fff;
      width:300px;
      border:1px solid #efefef;
    }
  }
</style>