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 白痴级入门教程
Nov 11 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
vue.js的安装方法
2017/05/12 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python多线程和队列操作实例
2015/06/21 Python
Python中的默认参数详解
2015/06/24 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python快速排序算法实例分析
2017/11/29 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
几个人围成一圈的问题
2013/09/26 面试题
某某同志考察材料
2014/05/28 职场文书
合作协议书模板2014
2014/09/26 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL