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获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
JavaScript WeakMap使用详解
Feb 05 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实现详细解析
2013/08/24 PHP
php反射应用示例
2014/02/25 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python+微信接口实现运维报警
2016/08/27 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
详解Python中import机制
2020/09/11 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
医药个人求职信范文
2014/01/29 职场文书
政府门卫岗位职责
2014/04/29 职场文书
小学教师师德承诺书
2014/05/23 职场文书
社团活动总结格式
2014/08/29 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年父亲节寄语
2015/03/23 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
学校团代会开幕词
2016/03/04 职场文书