vue实现一个简单的拖拽排序组件

想做一个排序功能就想到了拖拽，自己做了一个可以满足基本需求的demo

主要用到了drag的两个事件
dragstart
dragover

思路就是，首先有一个数组数据，dragstart的时候记录下拖动的元素数据在数组中的下标，dargover的时候记录下放置元素的下标，然后通过splice方法改变数组。

下面是封装的组件主要代码：

这是是个列表，可以把它当做一个空的表格的感觉，具体表格内容需要通过slot的方式传入

<template>
  <div>
    <el-switch v-model="draggable" active-text="拖拽排序" inactive-text="禁止排序"></el-switch>
    <div class="z-nav-list">
      <div
        :class="'z-nav-wrap '+(draggable ? 'draggable' :'')"
        v-for="(item, index) in list"
        :key="item.id"
        :index="index"
        @dragover="dragover($event, index)"
      >
        <a href="javascript:;"
          :draggable="draggable"
          @dragstart="dragstart($event, index)"
          @dragend="dragend()"
        >
          <slot v-bind:row="item"></slot>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/tool';
  export default{
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        oldPosition: 0,//拖拽元素 index
        newPutPosition: 0,//拖拽 放入元素index，放入后变成拖拽元素的index
        draggable: false
      }
    },
    computed: {
      list: {
        get() {
          let data = deepClone(this.data);
          data.forEach((v, k) => {
            v.index = k;
          });
          return data;
        },
        set() {
        }
      }
    },
    methods: {
      dragstart(e, index) {
        if(!this.draggable) return false;
        // this.target = e.currentTarget;
        this.oldPosition = index;
      },
      dragend(index) {
        if(!this.draggable) return false;
      },
      dragover(e, index) {
        if(!this.draggable) return false;
        e.preventDefault();
        this.newPutPosition = index;
        if(this.oldPosition != this.newPutPosition) {
          let item = this.list.splice(this.oldPosition, 1);
          this.list.splice(this.newPutPosition, 0, item[0]);
          this.oldPosition = this.newPutPosition;
          this.$emit('change', this.list);
        }
      }
    }
  }
</script>