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: ‘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>

原文地址:https://www.cnblogs.com/nonsec/p/9438508.html

时间: 2024-10-09 21:32:54

Vue拖拽交换数据(非插件)的相关文章

vue拖拽插件(弹框拖拽)

// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model="tags" :move="getdata" @update="datadragEnd"> <transition-group> <div class="testdiv" v-for="eleme

vue拖拽排序插件vuedraggable的使用 附原生使用方法

Vue中使用 先下载依赖: npm install vuedraggable -S 项目中引入 import draggable from 'vuedraggable' 注册 components: { draggable }, demo: <template> <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> &

React-Native ListView拖拽交换Item

在高仿"掘金"客户端的那个项目中,你会发现在打开和关闭"首页展示标签"中,我并没有实现可拖拽换位item的效果.不过在自己新写的Gank.io项目中,将这一功能实现了一把,在此记录一下.先上效果图 对,就是这样- 在实现这个效果前,我的思路是这样的,布局->item可点击突出显示->可移动item->可交换item->抬起手指恢复正确的位置.下面一一解释. 布局 忘了说了,由于这个界面的item的元素较少,并且为了方便起见,我并没有采用Lis

vue2-dragula vue拖拽组件

Drag and drop so simple it hurts Vue wrapper for dragula drag'n drop library, based on vue-dragula by @Astray-git. vue 为 dragula 拖拽 包装 减少 代码,基于   vue-dragula. This library has been refactored, upgraded and extended with powerful new features for use

VUE 拖拽框

<div @mousedown="mousedown" id="dragbox" class="dragbox"> </div> mousedown(event) { this.selectElement = document.getElementById("dragbox"); var div1 = this.selectElement; this.selectElement.style.cursor

HTML5之拖拽(兼容IE和非IE)

前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不

Android DragAndDrop API 拖拽效果 交换ListView的Item值

前言 Android系统自API Level11开始添加了关于控件拖拽的相关API,可以方便的实现控件的一些拖拽效果,而且比自己用Touch事件写的效果更好.下面就来看下DragAndDrop吧. 使用Android的DragAndDrop框架,我们可以方便的在当前布局中用拖拽的形式实现两个View之间数据的互换.DragAndDrop框架包括一个拖拽事件的类,拖拽监听器,以及一些帮助方法和类. 尽管DragAndDrop主要是为了数据移动而设计,但是我们也可用他做别的UI处理.举个例子,我们可

ngDraggable简单使用及实现拖拽排序

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元素 ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 ng-drag:元素是否允许拖拽 ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 ng-dr

【转】Nestable可拖拽树

原文地址:https://blog.csdn.net/wangmj518/article/details/81746523 Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看. 下图是我在现在系统中用到的Nestable,对系统模块排序. 1.首先是需要引入的文件 bootstrap.min.css Bootstrap的CSS文件 font-awesome.min.css 这个是Bootstrap的一个