javascript實現(xiàn)移動端觸屏拖拽功能
更新時間：2020年07月29日 09:31:03 作者：XSP_csdn
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)移動端觸屏拖拽的具體代碼，供大家參考，具體內(nèi)容如下
HTML:
<body> <div id="div1"> </div> </body>
CSS:
<style media="screen">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height:100%;
}
#div1 {
width: 50px;
height: 50px;
background: cyan;
position: absolute;
}
</style>
JS:
<script type="text/javascript">
var div1=document.querySelector('#div1');
var maxW=document.body.clientWidth-div1.offsetWidth;
var maxH=document.body.clientHeight-div1.offsetHeight;
div1.addEventListener('touchstart',function(e){
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = touch.clientX - div1.offsetLeft;
oT = touch.clientY - div1.offsetTop;
document.addEventListener("touchmove",defaultEvent,false);
})
div1.addEventListener('touchmove',function(e){
var ev = e || window.event;
var touch = ev.targetTouches[0];
var oLeft = touch.clientX - oL;
var oTop = touch.clientY - oT;
if(oLeft<0){
oLeft=0;
}else if (oLeft>=maxW) {
oLeft=maxW;
}
if(oTop<0){
oTop=0;
}else if (oTop>=maxH) {
oTop=maxH;
}
div1.style.left = oLeft + 'px';
div1.style.top = oTop + 'px';
})
div1.addEventListener('touchend',function(){
document.removeEventListener("touchmove",defaultEvent);
})
function defaultEvent(e) {
e.preventDefault();
}
</script>
說明 :
maxW:div1可移動的最大寬度
maxH:div1可移動的最大高度
oL、oT:鼠標所點位置的坐標
效果:
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js調(diào)用瀏覽器打印模塊實現(xiàn)點擊按鈕觸發(fā)自定義函數(shù)
把瀏覽器打印的功能保留并賦予到自己添加的按鈕當中，可以在點擊按鈕的同時觸發(fā)自定義的函數(shù)2014-03-03
JS函數(shù)動態(tài)傳遞參數(shù)的方法分析【基于arguments對象】
這篇文章主要介紹了JS函數(shù)動態(tài)傳遞參數(shù)的方法,結(jié)合實例形式分析了javascript通過arguments對象獲取傳遞參數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了微信小程序多項選擇器checkbox，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在javascript中javascript:void(0)經(jīng)常會用到，大家知道此含有嗎，在Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值，本文給大家介紹js中javascript:void(0) 真正含義，需要的朋友可以參考下2015-08-08
可多次使用的仿126郵箱選項卡的源碼...2007-10-10
JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法完整實例
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法,結(jié)合完整實例形式分析了A*尋路算法的具體實現(xiàn)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Javascript 對象（object）合并操作,結(jié)合實例形式分析了javascript基于jQuery的extend方法、對象屬性、遍歷賦值等操作實現(xiàn)對象合并相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2019-07-07
uniapp改變底部安全區(qū)頂部手機信號時間電池欄顏色樣式
這篇文章主要為大家介紹了uniapp改變底部安全區(qū)頂部手機信號時間電池欄顏色樣式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本篇文章主要是對js日期、星座的級聯(lián)顯示代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
小編使用ajax實現(xiàn)靜態(tài)頁面也能實現(xiàn)微信分享功能，今天小編給大家分享實現(xiàn)代碼，對js靜態(tài)頁面微信分享功能感興趣的朋友參考下本文2017-02-02