當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript适配移动端的移动元素方法
生活随笔
收集整理的這篇文章主要介紹了
JavaScript适配移动端的移动元素方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
難點(diǎn)：移動(dòng)端與pc端的事件屬性不一樣，需要計(jì)算好偏移量才能跟著移動(dòng)。
一、原理
首先需要獲取到點(diǎn)擊的位置距離元素el距離（top，left）
在添加移動(dòng)事件：通過每次獲得移動(dòng)獲得到在頁面的具體位置（x，y）
元素el所距離page邊框的距離為：
左邊距離 = x - left;
上邊距離 = y - left;
二、具體實(shí)現(xiàn)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="block"></div> </body> <style>#block {width: 100px;height: 100px;background-color: orangered;position: fixed;} </style><script>var el = document.querySelector("#block")var t1;var Top = 0;var Left = 0;function moveEl(e) {//判斷是否有延遲函數(shù)if (t1 != -1) {clearTimeout(t1);t1 = -1;}let clientY = e.clientY ?? e.touches[0].clientY;let clientX = e.clientX ?? e.touches[0].clientX;el.style.top = clientY - Top + "px";el.style.left = clientX - Left + "px";console.log(Top);}//鼠標(biāo)點(diǎn)擊和觸屏點(diǎn)擊function mouseDown(e) {// 移動(dòng)端無法直接獲取與父元素的位置信息，// 所以需要減去父元素與頁面的位置：parseInt(win.value.style.top)Top = e.offsetY ?? e.touches[0].pageY - parseInt(el.style.top || 0);Left = e.offsetX ?? e.touches[0].pageX - parseInt(el.style.left || 0);//取消拖動(dòng)時(shí)會(huì)選中文字，不取消會(huì)出現(xiàn)事件無法取消bugdocument.body.onselectstart = document.body.ondrag = function () {return false;};// 添加事件window.addEventListener("mousemove", moveEl);// 適配觸摸屏window.addEventListener("touchmove", moveEl);}// 鼠標(biāo)右鍵松開事件function mouseUp(e) {//取消拖動(dòng)時(shí)不會(huì)選中文字document.body.onselectstart = document.body.ondrag = function () {return true;};// 移出事件window.removeEventListener("mousemove", moveEl);//適配觸摸window.removeEventListener("touchmove", moveEl);}// 鼠標(biāo)移出事件function mouseOut() {//解決頻繁移出bugif (t1 != -1) return;//由于瀏覽器刷新有延遲需防抖移出t1 = setTimeout(() => {window.removeEventListener("mousemove", moveEl);}, 800);}el.addEventListener("mousedown", mouseDown)el.addEventListener("mouseup", mouseUp)el.addEventListener("mouseout", mouseOut)// 移動(dòng)端事件el.addEventListener("touchstart", mouseDown)el.addEventListener("touchend", mouseUp)</script></html>總結(jié)
以上是生活随笔為你收集整理的JavaScript适配移动端的移动元素方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Helper辅助类设计技巧
- 下一篇： [EXtJS5学习笔记]第一节 Senc