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拖拽交换数据(非插件)的更多相关文章

  1. Vue拖拽组件

    vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...

  2. Xshell拖拽上传文件插件

    lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...

  3. vue拖拽组件开发

    vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...

  4. vue拖拽插件(弹框拖拽)

    // =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...

  5. vue el-transfer新增拖拽排序功能---sortablejs插件

    <template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 -  --> ...

  6. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  7. Vue 拖拽组件 vuedraggable 和 vue-dragging

    一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...

  8. vue 拖拽移动(类似于iPhone虚拟home )

    vue 移动端 PC 兼容 元素 拖拽移动  效果演示 事件知识点 移动端 PC端 注释 touchstart mousedown 鼠标/手指按下事件 touchmove mousemove 鼠标/手 ...

  9. vue2-dragula vue拖拽组件

    https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragu ...

随机推荐

  1. 似乎是最实用的hashtable知识总结

    哈希表:将对象转换为索引,然后存储在数组中. 定义注意点: 对象:就是面向对象中的对象,可以为任何东西.整数.浮点数.日期.字符串.类. 转换:通过hash函数来完成,hash函数是hash表的核心与 ...

  2. JavaScript 循环判断练习题

    JavaScript 循环判断练习题 小明有一组水果("苹果","梨子","香蕉","葡萄","西瓜" ...

  3. JSP+Servlet+JDBC+C3P0实现的人力资源管理系统

    项目简介 项目来源于:https://github.com/ruou/hr 本系统基于JSP+Servlet+C3P0+Mysql.涉及技术少,易于理解,适合JavaWeb初学者学习使用. 难度等级: ...

  4. 使用 Minikube 安装 Kubernetes

    概述: 单机低配置主机也可以玩转kubernetes集群.该文章是将介绍使用Minikube安装Kubernetes集群(一般用于本地/开发环境). 配置环境: 硬件:CPU 至少2个核心,至少2.5 ...

  5. java读源码 之 list源码分析(ArrayList)---JDK1.8

    java基础 之 list源码分析(ArrayList) ArrayList: 继承关系分析: public class ArrayList<E> extends AbstractList ...

  6. 微软关于LINQ的101个例子

    记录,备查. 101 LINQ Sqmples

  7. Matlab2016b线性规划函数linprog的几个问题

    一.如何设置算法为单纯型法: options = optimoptions('linprog','Algorithm','dual-simplex') 二.linprog的参数用法: [x,Fval, ...

  8. 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 ...

  9. 【Hadoop离线基础总结】流量日志分析网站整体架构模块开发

    目录 数据仓库设计 维度建模概述 维度建模的三种模式 本项目中数据仓库的设计 ETL开发 创建ODS层数据表 导入ODS层数据 生成ODS层明细宽表 统计分析开发 流量分析 受访分析 访客visit分 ...

  10. Istio的流量管理(实操一)(istio 系列三)

    Istio的流量管理(实操一)(istio 系列三) 使用官方的Bookinfo应用进行测试.涵盖官方文档Traffic Management章节中的请求路由,故障注入,流量迁移,TCP流量迁移,请求 ...