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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
年终自我鉴定
2013/10/09 职场文书
大学校庆邀请函
2014/01/11 职场文书
《搭石》教学反思
2014/04/07 职场文书
房屋买卖协议书
2014/04/10 职场文书
安全生产承诺书范文
2014/05/22 职场文书
党性分析自查总结
2014/10/14 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
MSSQL基本语法操作
2022/04/11 SQL Server
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python