<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
padding: 5px
}
</style>