Vue拖拽交换数据（非插件）
2024-10-19 11:53:35
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: '18012345678'
},
{
id: 2,
name: 'bbb',
mobile: '18112345678'
},
{
id: 3,
name: 'ccc',
mobile: '18212345678'
},
{
id: 4,
name: 'ddd',
mobile: '18312345678'
},
{
id: 5,
name: 'eee',
mobile: '18412345678'
}
]
},
{
teamName: 'B队',
children: [
{
id: 6,
name: 'fff',
mobile: '18512345678'
},
{
id: 7,
name: 'ggg',
mobile: '18612345678'
},
{
id: 8,
name: 'hhh',
mobile: '18712345678'
},
{
id: 9,
name: 'iii',
mobile: '18812345678'
},
{
id: 10,
name: 'jjj',
mobile: '18912345678'
}
]
},
{
teamName: 'C队',
children: [
{
id: 11,
name: 'kkk',
mobile: '19012345678'
},
{
id: 12,
name: 'lll',
mobile: '19112345678'
},
{
id: 13,
name: 'mmm',
mobile: '19212345678'
},
{
id: 14,
name: 'nnn',
mobile: '19312345678'
},
{
id: 15,
name: 'ooo',
mobile: '19412345678'
}
]
}
]
}
},
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>
最新文章
- 计算机网络中的帧封装（C实现）
- C# 内嵌其他程序到自己程序
- HTML · 图片热点，网页划区，拼接，表单
- Java基础-父类-子类执行顺序
- poj3207 2-SAT入门
- 轻量级应用开发之（02）UIView
- mac 下 word 2011 使用笔记
- 在Window Embedded CE(Wince)下使用OpenNETCF进行路由表的开发
- 转： 从Mysql某一表中随机读取n条数据的SQL查询语句
- ASP.NET - 对URL传递的值进行编码Server.UrlEncode()
- jqueryui datepicker refresh
- OCP读书笔记(18) - 空间管理
- 利用Tess4J实现图片识别
- Map集合。
- Java与Netty实现高性能高并发
- 【原创】驱动加载之OpenService
- webform非表单提交时防xss攻击
- C# 判断ip地址是否正确
- BG.Hadoop.Master
- web 应用请求乱码问题