vue 中两种拖动排序

vue+iview 表格 拖拽排序，代码如下

<Table
      border
      ref="selection"
      :columns="columns"
      :data="data"
     :draggable ="true"
     @on-drag-drop="onDragDrop"
    >   
    </Table>

js 代码如下

onDragDrop(first, end) {
      //转成int型，方便后续使用
      first = parseInt(first);
      end = parseInt(end);

      let tmp = this.data[first];

      if (first < end) {
        for (var i = first + 1; i <= end; i++) {
          this.data.splice(i - 1, 1, this.data[i]);
        }
        this.data.splice(end, 1, tmp);
      }

      if (first > end) {
        for (var i = first; i > end; i--) {
          this.data.splice(i, 1, this.data[i - 1]);
        }
        this.data.splice(end, 1, tmp);
      }
   },

vue+其他列表拖拽排序 awe-dnd

npm install awe-dnd --save

//main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

<!--your.vue-->
<script>
export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  },

  mounted() {
       this.$dragging.$on('dragged', ({ value }) => {
      		console.log(value.item)
	      	console.log(value.list)
    	})
  } 
}
</script>

<template>
  <div class="color-list">
      <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
  </div>
</template>