移动端实现拖拽的两种方法

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

方案一：固定定位 fixed

position:fixed;

touchstart 事件) 的时候，需要将原本的元素 A 拷贝一份 ( cloneNode() ) 

同时给原本的元素 A 设置 visibility: hidden;  使之隐藏并占位

1.1 创建遮罩

) { let modal =.getElementById(id) (!modal) { modal = .createElement(= modal.style.cssText = .body.appendChild(modal) } },

1.2 开始拖拽

touchstart 事件的时候，首先创建遮罩

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

.(.modalID) element = e.targetTouches[0 target = e.target.() target.id = .copyID

<span style="color: #008000;">//<span style="color: #008000;"> 记录初始点击位置 client，用于计算移动距离
<span style="color: #0000ff;">this.source.client =<span style="color: #000000;"> {
x: element.clientX,y: element.clientY
}

<span style="color: #008000;">//<span style="color: #008000;"> 算出目标元素的固定位置
<span style="color: #0000ff;">let disX = <span style="color: #0000ff;">this.source.start.left =<span style="color: #000000;"> element.target.getBoundingClientRect().left
<span style="color: #0000ff;">let disY = <span style="color: #0000ff;">this.source.start.top =<span style="color: #000000;"> element.target.getBoundingClientRect().top
target.style.cssText =<span style="color: #800000;"> position: fixed; left: <span style="color: #0000ff;"&gt;${disX}</span>px; top: <span style="color: #0000ff;"&gt;${disY}</span>px;

<span style="color: #008000;">//<span style="color: #008000;"> 将拷贝的元素放到遮罩中
document.<span style="color: #993300;">getElementById(<span style="color: #0000ff;">this<span style="color: #000000;">.modalID).<span style="color: #993300;">appendChild(target)
},

1.3 处理拖拽

touchmove 事件

element = e.targetTouches[0 target = document.(<span style="color: #008000;">//<span style="color: #008000;"> 根据初始点击位置 client 计算移动距离
<span style="color: #0000ff;">let left = <span style="color: #0000ff;">this.source.start.left + element.clientX - <span style="color: #0000ff;">this<span style="color: #000000;">.source.client.x
<span style="color: #0000ff;">let top = <span style="color: #0000ff;">this.source.start.top + element.clientY - <span style="color: #0000ff;">this<span style="color: #000000;">.source.client.y

<span style="color: #008000;">//<span style="color: #008000;"> 移动当前元素
target.style.left =<span style="color: #000000;"><span style="color: #800000;"> <span style="color: #0000ff;"&gt;${left}</span>px
target.style.top =<span style="color: #000000;"><span style="color: #800000;"> <span style="color: #0000ff;"&gt;${top}</span>px
},

1.4 拖拽结束

end =00 modal = document.((modal) (end) },

方案二：平移动画 translate

transform: translate(X,Y) 中 x,y 的坐标信息，实现拖拽

2.1 开始拖拽

element = e.targetTouches[0 .source.client =

 createModal() 方法

2.2 处理拖拽

element = e.targetTouches[0<span style="color: #008000;">//<span style="color: #008000;"> 根据初始 client 位置计算移动距离
let x = element.clientX - <span style="color: #0000ff;">this<span style="color: #000000;">.source.client.x
let y = element.clientY - <span style="color: #0000ff;">this<span style="color: #000000;">.source.client.y

<span style="color: #008000;">//<span style="color: #008000;"> 移动当前元素
element.target.style.cssText =<span style="color: #000000;"><span style="color: #800000;"> transform: translate(<span style="color: #0000ff;"&gt;${x}</span>px,<span style="color: #0000ff;"&gt;${y}</span>px);
},

2.3 拖拽结束

e.target.style.cssText = },

小结：

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