Vue拖拽交换数据（非插件）

Posted 2020-12-28 nonsec

HelloWorld.vue 文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <div class="team" v-for="(team,tindex) in teamDataArr" :key="tindex">
        <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: ‘Hello World‘,
      startExchangeIndex: ‘‘,
      endExchangeIndex: ‘‘,
      teamDataArr: [
        {
          teamName: ‘A队‘,
          children: [
            {
              id: 1,
              name: ‘aaa‘,
              mobile: ‘18662245790‘
            },
            {
              id: 2,
              name: ‘bbb‘,
              mobile: ‘18662245791‘
            },
            {
              id: 3,
              name: ‘ccc‘,
              mobile: ‘18662245792‘
            },
            {
              id: 4,
              name: ‘ddd‘,
              mobile: ‘18662245793‘
            },
            {
              id: 5,
              name: ‘eee‘,
              mobile: ‘18662245794‘
            }
          ]
        },
        {
          teamName: ‘B队‘,
          children: [
            {
              id: 6,
              name: ‘fff‘,
              mobile: ‘18662245795‘
            },
            {
              id: 7,
              name: ‘ggg‘,
              mobile: ‘18662245796‘
            },
            {
              id: 8,
              name: ‘hhh‘,
              mobile: ‘18662245797‘
            },
            {
              id: 9,
              name: ‘iii‘,
              mobile: ‘18662245798‘
            },
            {
              id: 10,
              name: ‘jjj‘,
              mobile: ‘18662245799‘
            }
          ]
        },
        {
          teamName: ‘C队‘,
          children: [
            {
              id: 11,
              name: ‘kkk‘,
              mobile: ‘18662245780‘
            },
            {
              id: 12,
              name: ‘lll‘,
              mobile: ‘18662245781‘
            },
            {
              id: 13,
              name: ‘mmm‘,
              mobile: ‘18662245782‘
            },
            {
              id: 14,
              name: ‘nnn‘,
              mobile: ‘18662245783‘
            },
            {
              id: 15,
              name: ‘ooo‘,
              mobile: ‘18662245784‘
            }
          ]
        }
      ] 
    }
  },
  methods: {
    onDragstart (event) {
      // event.target 都返回源元素
      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(‘拖拽结束‘)
      
    },
    onDrop (event) {
      // event.target 都返回目标元素
      if (event.target.className == ‘member‘) {
        this.endExchangeIndex = event.target.getAttribute(‘data-id‘)
      } else {
        this.endExchangeIndex = 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-right: 20px;
}
.member {
  overflow: hidden;
  padding-left: 20px;
}
.member > div {
  float: left;
  margin:2px 5px;
  border: 1px solid #eee;
  padding: 5px
}
</style>