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 类与静态类的实现(续)
Apr 02 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
JavaScript原型链详解
Nov 07 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
使用Apache的rewrite技术
2006/06/22 PHP
一个目录遍历函数
2006/10/09 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
JS如何把字符串转换成json
2020/02/21 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
浅谈Python基础之I/O模型
2017/05/11 Python
解决python线程卡死的问题
2019/02/18 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
python 常见的反爬虫策略
2020/09/27 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
建筑公司员工自我鉴定
2014/04/08 职场文书
学校节能减排倡议书
2014/05/16 职场文书
保护环境倡议书500字
2014/05/19 职场文书
法学求职信
2014/06/22 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android