JS移动端实现拖拽的方法

　　介绍

今天就跟大家聊聊有关JS移动端实现拖拽的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

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

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

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

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

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

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

2。中使用变换的平移翻译属性实现拖拽。

<强>方案一:固定定位固定

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

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

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

给新元素A2添加定位,同时给原本的元素一个设置能见度:隐藏;使之隐藏并占位

1.1创建遮罩

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

 createModal (id) {
　　让模态=. getelementbyid (id)
　　如果(模态){//在没有遮罩的时候创建遮罩
　　模态=document.createElement (& # 39; div # 39;)
　　模态。id=id
　　modal.style。cssText=':固定;左:0;上图:0;右:0;底部:0;z - index: 999;
　　document.body.appendChild(模态)
　　}
　　},

1.2开始拖拽

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

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

为了记录起点信息,需要数据中创建一个对象源,用于记录点击的位置客户,和初始定位坐标开始

 handleTouchstart (e){//开始拖拽//创建遮罩层
　　this.createModal (this.modalID)//modalID遮罩层的id,由外部定义
　　让元素=e.targetTouches [0]
　　让目标=e.target.cloneNode(真正的)//拷贝目标元素
　　目标。id=opyID//copyID拷贝元素的id,由外部定义//记录初始点击位置客户,用于计算移动距离
　　this.source。客户={
　　x: element.clientX,
　　y: element.clientY
　　}//算出目标元素的固定位置
　　让disX=this.source.start。.left左=element.target.getBoundingClientRect ()
　　让disY=this.source.start。直顶=element.target.getBoundingClientRect()上
　　target.style。cssText=':固定;左:$ {disX} px;上图:$ {disY} px;”//将拷贝的元素放到遮罩中
　　. getelementbyid (this.modalID) .appendChild(目标)
　　},

1.3处理拖拽

拖拽的时候,监听touchmove事件

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

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

 handleTouchmove (e){//拖拽中
　　让元素=e.targetTouches [0]
　　让目标=. getelementbyid (this.copyID)//根据初始点击位置客户计算移动距离
　　让左=this.source.start。左+元素。clientX——this.source.client.x
　　让=this.source.start。+顶级元素。clientY——this.source.client.y//移动当前元素
　　target.style。左左=' $ {}px”
　　target.style。顶级=' ${顶级}px”
　　},

1.4拖拽结束

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

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

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

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

<强>方案二:平移动画翻译

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

只需对原本的元素添加变换属性,甚至不需要过渡属性

然后在拖拽过程中,实时更新变换:翻译(X, Y)中X, Y的坐标信息,实现拖拽

2.1开始拖拽

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

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

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

2.2处理拖拽

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

 handleTouchmove (e){//拖拽中
　　让元素=e.targetTouches [0]//根据初始端位置计算移动距离
　　让x=元素。clientX——this.source.client.x
　　让y=元素。clientY——this.source.client.y//移动当前元素
　　element.target.style。cssText='变换:翻译($ {x} px, $ {y} px);“
　　},
JS移动端实现拖拽的方法