JS移动端实现拖拽的方法-创新互联

今天就跟大家聊聊有关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)
 }
},