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 相关文章推荐
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
详解JS数值Number类型
Feb 07 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
微信小程序实现聊天室
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
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
python集合的新增元素方法整理
2020/12/07 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
文明餐桌活动方案
2014/02/11 职场文书
校长寄语大全
2014/04/09 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
八一建军节主持词
2015/07/01 职场文书
校运会班级霸气口号
2015/12/24 职场文书