移动端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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jquery 插件学习(五)
Aug 06 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
解决vue-loader加载不上的问题
Oct 21 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
详解python 发送邮件实例代码
2016/12/22 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python各种扩展名区别点整理
2020/02/27 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
购房协议书
2014/04/11 职场文书
学校就业推荐信范文
2014/05/19 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技