vue 拖拽元素交换数据

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <div class="team" v-for="(team,tindex) in teamDataArr" :key="tindex">
		<div style="margin: 5px;">{{team.teamName}}</div> 
        <div class="member" v-for="(item,cindex) in team.children" :key="cindex" :data-id="tindex+'-'+cindex" 
		draggable="true" @dragstart="onDragstart($event)" 
		@dragend="onDragend($event)" @dragover="onDragover($event)" 
		@drop="onDrop($event)">
          <!-- <div>{{item.id}}</div> -->
          <div>{{item.name}}</div>
          <div>{{item.mobile}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '调整宿舍',
      startExchangeIndex: '',
      endExchangeIndex: '',
      teamDataArr: [
        {
          teamName: '一号宿舍',
          children: [
            {
              id: 1,
              name: '李大林',
              mobile: '01'
            },
            {
              id: 2,
              name: '唯有泪',
              mobile: '02'
            },
            {
              id: 3,
              name: '魏启明',
              mobile: '03'
            },
            {
              id: 4,
              name: '闫梦飞',
              mobile: '04'
            },
            {
              id: 5,
              name: '夏远新',
              mobile: '05'
            }
          ]
        },
        {
          teamName: '二号宿舍',
          children: [
            {
              id: 6,
              name: '小李',
              mobile: '01'
            },
            {
              id: 7,
              name: '小魏',
              mobile: '02'
            },
            {
              id: 8,
              name: '小伟',
              mobile: '03'
            },
            {
              id: 9,
              name: '小闫',
              mobile: '04'
            },
            {
              id: 10,
              name: '小夏',
              mobile: '05'
            }
          ]
        }
      ] 
    }
  },
  methods: {
    onDragstart (event) {  
      // event.target 返回源元素  也就是选中的元素 通过data-id 进行筛选
      this.startExchangeIndex = event.target.getAttribute('data-id')
      console.log('拖拽开始')
    },
    onDragend (event) {  //拖拽结束交换数据
      // event.target 返回源元素
      console.log('下标' + this.startExchangeIndex + ' 和 ' + this.endExchangeIndex + '进行替换')
      
      let startTeamIndex = parseInt(this.startExchangeIndex.split('-')[0])
      let startMemberIndex = parseInt(this.startExchangeIndex.split('-')[1])
      let endTeamIndex = parseInt(this.endExchangeIndex.split('-')[0])
      let endMemberIndex = parseInt(this.endExchangeIndex.split('-')[1])

      let _id = this.teamDataArr[endTeamIndex].children[endMemberIndex].id
      let _name = this.teamDataArr[endTeamIndex].children[endMemberIndex].name
      let _mobile = this.teamDataArr[endTeamIndex].children[endMemberIndex].mobile

      this.teamDataArr[endTeamIndex].children[endMemberIndex].id = this.teamDataArr[startTeamIndex].children[startMemberIndex].id
      this.teamDataArr[endTeamIndex].children[endMemberIndex].name = this.teamDataArr[startTeamIndex].children[startMemberIndex].name
      this.teamDataArr[endTeamIndex].children[endMemberIndex].mobile = this.teamDataArr[startTeamIndex].children[startMemberIndex].mobile

      this.teamDataArr[startTeamIndex].children[startMemberIndex].id = _id
      this.teamDataArr[startTeamIndex].children[startMemberIndex].name = _name
      this.teamDataArr[startTeamIndex].children[startMemberIndex].mobile = _mobile

      console.log('拖拽结束')
       this.startExchangeIndex ='' 
	   this.endExchangeIndex =''
    },
    onDrop (event) {  
      // event.target 返回目标元素 通过data-id 进行筛选
	  console.log(event)
      if (event.target.className == 'member') {   //拖拽整的member 元素
        this.endExchangeIndex = event.target.getAttribute('data-id')
		console.log(event.target.getAttribute('data-id'))
      } else {  //拖拽整的member元素里面的孩子元素 通过孩子元素找到它的父元素
        this.endExchangeIndex = event.target.parentElement.getAttribute('data-id')
		console.log(event.target.parentElement.getAttribute('data-id'))
      }
    },
    onDragover(event){
      // 阻止元素的默认行为，不然ondrop不管用
      event.preventDefault();
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.team {
  float: left;
  border: 1px solid black;
  margin: 20px;
}
.member {
  overflow: hidden;
  padding-left: 20px;
}
.member {
  float: left;
  margin: 5px;
  border: 1px solid #eee;
  padding: 5px
}
</style>