移动端JS实现拖拽两种方法解析


Posted in Javascript onOctober 12, 2020

移动端的项目经常会引入手势库来实现拖拽

不过如果只是一两个页面用到拖拽,再引入一个手势库就很不划算

最近的项目中就有这么一个需求:

移动端JS实现拖拽两种方法解析

因为就这一个地方需要拖拽,所以我就没有引入第三方库

移动端的拖拽有两种主流的实现方案:

1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果;

2. 使用 transform 中的平移translate 属性实现拖拽。

方案一:固定定位 fixed

这种方案的核心就是给元素添加固定定位position:fixed;

但定位之后,元素会脱离文档流,会影响原有但布局

因此在开始拖拽 (触发touchstart事件) 的时候,需要将原本的元素 A 拷贝一份 (cloneNode())

给新元素 A2 添加定位,同时给原本的元素 A 设置visibility:hidden; 使之隐藏并占位

1.1 创建遮罩

首先封装一个创建遮罩的方法,用于放置拷贝出来的元素,并防止误触

createModal (id) {
 let modal = document.getElementById(id)
 if (!modal) { // 在没有遮罩的时候创建遮罩
  modal = document.createElement('div')
  modal.id = id
  modal.style.cssText = `position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999;`
  document.body.appendChild(modal)
 }
},

1.2 开始拖拽

在触发touchstart事件的时候,首先创建遮罩

并通过getBoundingClientRect()方法获取到元素 A 的坐标,记录起点信息

为了记录起点信息,需要 data 中创建一个对象source,用于记录点击的位置 client,和初始定位坐标 start

handleTouchstart (e) { // 开始拖拽
 // 创建遮罩层
 this.createModal(this.modalID) // modalID 遮罩层的id,由外部定义
 let element = e.targetTouches[0]
 let target = e.target.cloneNode(true) // 拷贝目标元素
 target.id = this.copyID // copyID 拷贝元素的id,由外部定义
 // 记录初始点击位置 client,用于计算移动距离
 this.source.client = {
  x: element.clientX,
  y: element.clientY
 }
 // 算出目标元素的固定位置
 let disX = this.source.start.left = element.target.getBoundingClientRect().left
 let disY = this.source.start.top = element.target.getBoundingClientRect().top
 target.style.cssText = `position: fixed; left: ${disX}px; top: ${disY}px;`
 // 将拷贝的元素放到遮罩中
 document.getElementById(this.modalID).appendChild(target)
},

1.3 处理拖拽

拖拽的时候,监听touchmove事件

用【当前鼠标点位置】减去【初始点击位置】得到移动的距离

再结合初始坐标信息,更新拖拽元素的坐标

handleTouchmove (e) { // 拖拽中
 let element = e.targetTouches[0]
 let target = document.getElementById(this.copyID)
 // 根据初始点击位置 client 计算移动距离
 let left = this.source.start.left + element.clientX - this.source.client.x
 let top = this.source.start.top + element.clientY - this.source.client.y
 // 移动当前元素
 target.style.left = `${left}px`
 target.style.top = `${top}px`
},

1.4 拖拽结束

拖拽结束的时候,记录终点位置,删除遮罩

handleTouchend (e) { // 拖拽结束
 let end = {
  x: e.changedTouches[0].clientX,
  y: e.changedTouches[0].clientY
 }
 // 删除遮罩层
 let modal = document.getElementById(this.modalID)
 document.body.removeChild(modal)
 // 处理结果
 this.doingSth(end)
},

不过上面的代码只实现了拖拽的功能,并没有对目标元素 A 进行显示/隐藏的操作

可以根据业务场景自行添加,或者参考方案二

方案二:平移动画translate

这种方案更为简单,不需要创建额外的 DOM 元素

只需对原本的元素添加 transform 属性,甚至不需要 transition 属性

然后在拖拽过程中,实时更新transform: translate(X, Y)中 x, y 的坐标信息,实现拖拽

2.1 开始拖拽

开始拖拽的时候,只需要记录起点坐标

handleTouchstart (e) { // 开始拖拽
 let element = e.targetTouches[0]// 记录初始 client 位置,用于计算移动距离
 this.source.client = {
  x: element.clientX,
  y: element.clientY
 }
},

为了防止拖拽的过程中误触,建议使用方案一的createModal()方法创建一个遮罩

2.2 处理拖拽

根据当前坐标和起点坐标,计算出距离,然后更新 translate 的坐标

handleTouchmove (e) { // 拖拽中
 let element = e.targetTouches[0]
 // 根据初始 client 位置计算移动距离
 let x = element.clientX - this.source.client.x
 let y = element.clientY - this.source.client.y
 // 移动当前元素
 element.target.style.cssText = `transform: translate(${x}px, ${y}px);`
},

2.3 拖拽结束

拖拽完成后,清除平移动画

handleTouchend (e) { // 拖拽结束
 // 清除拖拽样式
 e.target.style.cssText = `transform: none;`
},

小结:

方案一在获取目标元素的坐标信息的时候使用了 getBoundingClientRect() 方法

但这个方法性能不高,应当少用

而且即时使用了该方法,最后得到的 left 和 top 也不够精确,touchstart 的时候,元素有明显的闪动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 #Javascript
vue实现移动端返回顶部
Oct 12 #Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 #Javascript
手机浏览器唤起微信分享(JS)
Oct 11 #Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
利用js canvas实现五子棋游戏
Oct 11 #Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python能开发游戏吗
2020/06/11 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
表扬信格式
2014/01/12 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
镇创先争优活动总结
2014/08/28 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
分享7个 Python 实战项目练习
2022/03/03 Python