分享一个基于vue2.0+的拖动排序组件

先来个效果图：

组件的实现是基于改变源数据的数组位置，所以使用的话必须要对传进去的源数据做一次深拷贝，操作完成后再传排序后的数组回去；
事件是采用了drag系列事件，跟需求和用户操作习惯比较吻合；
图标是element-ui里面的；
过度效果是vue的transition-group标签实现的，这里要注意的是transition-group包裹的次级元素一定要有唯一的key，而且依旧要设置transition样式，否则不会有过度效果；
获取数组下标的处理方式不是特别好，希望路过的大神帮忙指点一下，蟹蟹；

下面是源码：

<template>
  <ul class="dragSort">
    <transition-group>
      <li
        draggable="true"
        @dragstart="handlerDragstart"
        @drag="handlerDrag"
        @dragend="handlerDragend"
        :id="index"
        v-for="(item, index) in dataList"
        :key="item.a">
        【{