vue实现移动端拖动排序


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了vue实现移动端拖动排序的具体代码,供大家参考,具体内容如下

效果

vue实现移动端拖动排序

代码:

<template>
 <div>
 <div class="mainDiv" id="columns">
 <div id="child"
  class="childDiv"
  v-for="(option,index) in options"
  :key="index"
 >
 {{option}}
 </div>

 <!-- <div id="test" class="test"
  @touchstart="down" @touchmove="move" @touchend="end"
 >什么都没有
 </div>-->
 </div>
 </div>
</template>
<script>
 export default {
 name: "touchMove",
 data() {
  return {
  options: ['选项1', '选项2', '选项3', '选项4'],
  columns: undefined,
  flags: false,
  position: {x: 0, y: 0},
  nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
  }
 },
 mounted() {
  this.columns = document.querySelectorAll('#child');
  let num = 0;
  for (let i of this.columns) {
  i.style.top = (i.offsetHeight * num) + 'px';
  i.addEventListener('touchstart', this.down);
  i.addEventListener('touchmove', this.move);
  i.addEventListener('touchend', this.end);
  num ++;
  }
 },
 methods: {
  down(e) {
  e.preventDefault();
  this.flags = true;
  var touch;
  if (e.touches) {
   touch = e.touches[0];
  } else {
   touch = e;
  }
  /*touch.clientX clientY 鼠标点击的位置与视图窗口的距离
  * e.target.offsetLeft offsetTop 鼠标点击的div与父元
  * 素的边框距离,父元素必须为定位样式,不然认为父元素为body
  * */
  this.position.x = touch.clientX;
  this.position.y = touch.clientY;
  this.dx = e.target.offsetLeft;
  this.dy = e.target.offsetTop;
  },
  move(e) {
  if (this.flags) {
   var touch;
   if (e.touches) {
   touch = e.touches[0];
   } else {
   touch = e;
   }
   this.nx = touch.clientX - this.position.x;
   this.ny = touch.clientY - this.position.y;//移动的距离
   this.xPum = this.dx + this.nx;
   this.yPum = this.dy + this.ny;
   e.target.style.left = this.xPum + 'px';
   e.target.style.top = this.yPum + 'px';
  }
  },
  end(e) {
  //处理边界问题
  let right= e.target.offsetLeft + e.target.offsetWidth;
  let bottom = e.target.offsetTop + e.target.offsetHeight;
  if(e.target.offsetLeft <= 0 || right >= e.target.offsetParent.offsetWidth){
   e.target.style.left = 0 + 'px';
  }
  if(e.target.offsetTop <= 0 || bottom >= e.target.offsetParent.offsetHeight){
   e.target.style.top = 0 + 'px';
  }
  this.dataTransfer(e);
  this.flags = false;
  },
  dataTransfer(e){
  let eleTop = e.target.offsetTop + Math.round(e.target.offsetHeight / 2);//找到当前元素的中间位置
  let arr = Array.from(this.columns);//将nodelist转为array
  let index = arr.indexOf(e.target);//找到当前元素下标
  for(let i in arr){
   //如果当前元素进入另一个元素的位置,将他们的值互换,位置还原
   if(eleTop > arr[i].offsetTop && eleTop < (arr[i].offsetTop + arr[i].offsetHeight)){
   //值互换,位置还原(保证数组的序列数据不变)
   let temp = arr[index].innerText;
   arr[index].innerText = arr[i].innerText;
   arr[i].innerText = temp;
   }
  }
  let num = 0;
  for (let i of this.columns) {
   i.style.top = (i.offsetHeight * num) + 'px';
   num ++;
  }
  }
 }
 }
</script>
<style scoped>
 .mainDiv {
 position: absolute;
 height: 500px;
 width: 100%;
 border: 3px solid red;
 border-radius: 10px;
 margin: 10px;
 }

 .mainDiv > .childDiv {
 position: absolute;
 height: 50px;
 width: 90%;
 background-color: blue;
 border: 2px solid;
 border-radius: 10px;
 margin: 1px auto;
 padding: 10px;
 text-align: center;
 }


 .test {
 position: relative;
 height: 50px;
 width: auto;
 background-color: red;
 border: 2px solid;
 border-radius: 3px;
 margin: 1px 0 1px;
 padding: 10px;
 text-align: center;
 }

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
js停止输出代码
Jul 20 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
微信小程序实现聊天室
Aug 21 #Javascript
vue实现折线图 可按时间查询
Aug 21 #Javascript
Vue按时间段查询数据组件使用详解
Aug 21 #Javascript
js绘制一条直线并旋转45度
Aug 21 #Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 #Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 #Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 #Javascript
You might like
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
js继承的实现代码
2010/08/05 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python修改MP3文件的方法
2015/06/15 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
django输出html内容的实例
2018/05/27 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
大学生见习期满自我鉴定
2014/09/13 职场文书
英语邀请函范文
2015/02/02 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
python 模块重载的五种方法
2021/04/24 Python
Python基础之元编程知识总结
2021/05/23 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫