移动端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 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
js实现的折叠导航示例
Nov 29 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
详解webpack 多入口配置
Jun 16 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
Nuxt的路由动画效果案例
Nov 06 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学习笔记(二):变量详解
2015/04/17 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python实现简单的socket server实例
2015/04/29 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python自定义线程类简单示例
2018/03/23 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python实现超市扫码仪计费
2018/05/30 Python
详解python3中tkinter知识点
2018/06/21 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
python与js主要区别点总结
2020/09/13 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
师范应届生求职信
2013/11/15 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
nginx设置资源请求目录的方式详解
2022/05/30 Servers