Vue拖拽交换数据(非插件)
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>
Vue拖拽交换数据(非插件)的更多相关文章
- Vue拖拽组件
vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...
- Xshell拖拽上传文件插件
lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- vue拖拽插件(弹框拖拽)
// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- vue 拖拽移动(类似于iPhone虚拟home )
vue 移动端 PC 兼容 元素 拖拽移动 效果演示 事件知识点 移动端 PC端 注释 touchstart mousedown 鼠标/手指按下事件 touchmove mousemove 鼠标/手 ...
- vue2-dragula vue拖拽组件
https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragu ...
随机推荐
- 似乎是最实用的hashtable知识总结
哈希表:将对象转换为索引,然后存储在数组中. 定义注意点: 对象:就是面向对象中的对象,可以为任何东西.整数.浮点数.日期.字符串.类. 转换:通过hash函数来完成,hash函数是hash表的核心与 ...
- JavaScript 循环判断练习题
JavaScript 循环判断练习题 小明有一组水果("苹果","梨子","香蕉","葡萄","西瓜" ...
- JSP+Servlet+JDBC+C3P0实现的人力资源管理系统
项目简介 项目来源于:https://github.com/ruou/hr 本系统基于JSP+Servlet+C3P0+Mysql.涉及技术少,易于理解,适合JavaWeb初学者学习使用. 难度等级: ...
- 使用 Minikube 安装 Kubernetes
概述: 单机低配置主机也可以玩转kubernetes集群.该文章是将介绍使用Minikube安装Kubernetes集群(一般用于本地/开发环境). 配置环境: 硬件:CPU 至少2个核心,至少2.5 ...
- java读源码 之 list源码分析(ArrayList)---JDK1.8
java基础 之 list源码分析(ArrayList) ArrayList: 继承关系分析: public class ArrayList<E> extends AbstractList ...
- 微软关于LINQ的101个例子
记录,备查. 101 LINQ Sqmples
- Matlab2016b线性规划函数linprog的几个问题
一.如何设置算法为单纯型法: options = optimoptions('linprog','Algorithm','dual-simplex') 二.linprog的参数用法: [x,Fval, ...
- LeetCode--Array--Remove Element && Search Insert Position(Easy)
27. Remove Element (Easy)# 2019.7.7 Given an array nums and a value val, remove all instances of tha ...
- 【Hadoop离线基础总结】流量日志分析网站整体架构模块开发
目录 数据仓库设计 维度建模概述 维度建模的三种模式 本项目中数据仓库的设计 ETL开发 创建ODS层数据表 导入ODS层数据 生成ODS层明细宽表 统计分析开发 流量分析 受访分析 访客visit分 ...
- Istio的流量管理(实操一)(istio 系列三)
Istio的流量管理(实操一)(istio 系列三) 使用官方的Bookinfo应用进行测试.涵盖官方文档Traffic Management章节中的请求路由,故障注入,流量迁移,TCP流量迁移,请求 ...