vue用dragstart实现拖拽

下面是HTML5的拖拽事件

dragstart：开始拖元素触发，作用于拖拽元素
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素
dragover：当元素拖动到drop元素上时触发，作用于目标元素
drop：当元素放下到drop元素触发，作用于目标元素
dragleave ：当元素离开drop元素时触发，作用于目标元素
drag：每次元素被拖动时会触发，作用于目标元素
dragend：放开拖动元素时触发，作用于目标元素

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

<template>
  <div class="hotteam">
    <div class="nimbus-com-item flex mb20" draggable //draggable使元素可拖拽
    v-for="(item, index) in hotteams" :key="index"
    @dragstart="dragstart($event, index)"
    @dragover.prevent 
    //必须给拖放区元素添加 dragover.prevent，才能使dragDrop事件正确执行
    @drop="dragDrop($event, index)">
      <router-link class="nimbus-com-img mr20" 
      :style="{'background-image': `url(${item.imgUrl})`}"
      :to="`/team/${item.id}`" target="_blank"></router-link>
      <div class="nimbus-com-desc">
        <router-link class="font18 nowrap" :to="`/team/${item.id}`" 
        target="_blank">{{item.name}}</router-link>
        <div class="font14 nimbus-txt-overflow">{{item.brief}}</div>
      </div>
      <i class="nb-close" @click="delTeam(index)"></i>
    </div>
  </div>
</template>
<script>
const hotteams = [
  {
    id:11,
    name: '团队1',
    brief: '团队可以是一帮人、
    imgUrl: 'https://obs-emcsapp-publipng',
    sort: 1
  },
  {
    id:22,
    name: '团队2',
    brief: '团队可以是一帮人、
    imgUrl: 'https://obs-emcsapp-publipng',
    sort: 2
  },
  {
    id:33,
    name: '团队3',
    brief: '团队可以是一帮人、
    imgUrl: 'https://obs-emcsapp-publipng',
    sort: 3
  }
]
export default {
  data () {
    return {
      hotteams,
      dragIdx: ''
    }
  },
  methods: {
    addTeam (team) {
      this.hotteams.push(team)
    },
    delTeam (idx) {
      this.hotteams.splice(idx, 1)
    },
    dragstart (e, index) {
      this.dragIdx = index
    },
    dragDrop (e, index) {
      let _teams = this.hotteams  //将hotteams存起来
      let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
      _teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
      _teams.splice(index, 0, _dragitem)  //将被拖拽的那条数据放到数组中指定的位置
    }
  }
}
</script>
<style lang="stylus" scoped>
.hotteam{
  display: flex;
  flex-wrap: wrap;
  justify-content space-between
}
.nimbus-com-item {
  width 496px
  cursor move
  .font18{
    margin-bottom 30px
  }
}
.nb-close{
  position absolute
  color #4800FD
  opacity: 0.26;
  top 20px
  right 20px
  cursor pointer
}
</style>