javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
本文是分享了javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能,具體內(nèi)容如下
效果圖:
實(shí)現(xiàn)代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <style> body { height: 2000px; } #block { width:200px; height:200px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div> touchstart,touchmove, touchend,touchcancel </div> <div id="block"></div> <script> // 獲取節(jié)點(diǎn) var block = document.getElementById("block"); var oW,oH; // 綁定touchstart事件 block.addEventListener("touchstart", function(e) { console.log(e); var touches = e.touches[0]; oW = touches.clientX - block.offsetLeft; oH = touches.clientY - block.offsetTop; //阻止頁(yè)面的滑動(dòng)默認(rèn)事件 document.addEventListener("touchmove",defaultEvent,false); },false) block.addEventListener("touchmove", function(e) { var touches = e.touches[0]; var oLeft = touches.clientX - oW; var oTop = touches.clientY - oH; if(oLeft < 0) { oLeft = 0; }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) { oLeft = (document.documentElement.clientWidth - block.offsetWidth); } block.style.left = oLeft + "px"; block.style.top = oTop + "px"; },false); block.addEventListener("touchend",function() { document.removeEventListener("touchmove",defaultEvent,false); },false); function defaultEvent(e) { e.preventDefault(); } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- 原生js實(shí)現(xiàn)九宮格拖拽換位
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- Sortable.js拖拽排序使用方法解析
- js實(shí)現(xiàn)拖拽效果
- 使用js實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
- JS實(shí)現(xiàn)的文件拖拽上傳功能示例
- JS實(shí)現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
- 使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
- JavaScript實(shí)現(xiàn)九宮格拖拽效果
相關(guān)文章
js 變量類型轉(zhuǎn)換常用函數(shù)與代碼[比較全]
腳本之家收集了一些 數(shù)字與字符之間的轉(zhuǎn)換,數(shù)組轉(zhuǎn)為字符等函數(shù)代碼。2009-12-12如何使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容
本篇文章是對(duì)使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06詳解webpack 入門總結(jié)和實(shí)踐(按需異步加載,css單獨(dú)打包,生成多個(gè)入口文件)
本篇文章主要介紹了webpack 入門總結(jié)和實(shí)踐(按需異步加載,css單獨(dú)打包,生成多個(gè)入口文件) ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06js仿支付寶填寫(xiě)支付密碼效果實(shí)現(xiàn)多方框輸入密碼
這篇文章主要介紹了js仿支付寶填寫(xiě)支付密碼效果實(shí)現(xiàn)多方框輸入密碼的功能,感興趣的小伙伴們可以參考一下2016-03-03JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程
這篇文章主要介紹了JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12JS如何實(shí)現(xiàn)在頁(yè)面上快速定位(錨點(diǎn)跳轉(zhuǎn)問(wèn)題)
本篇文章主要介紹了JS如何實(shí)現(xiàn)在頁(yè)面上快速定位(錨點(diǎn)跳轉(zhuǎn)問(wèn)題),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08