javascript實現移動端觸屏拖拽功能
更新時間：2020年07月29日 09:31:03 作者：XSP_csdn
這篇文章主要為大家詳細介紹了javascript實現移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現移動端觸屏拖拽的具體代碼，供大家參考，具體內容如下
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:鼠標所點位置的坐標
效果:
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了通過js如何獲取當前頁面的url網址信息,需要的朋友可以參考下2014-06-06
項目中常遇到輸入框檢查的需求，比如即時搜索，用change事件？change事件失去焦點才發(fā)生，無法做到即時。keypresss事件？能監(jiān)聽到鍵盤，但監(jiān)聽不到鼠標復制粘貼，不完美2014-09-09
工作需求,將webview的內容導出到pdf輸出,下面這篇文章主要給大家介紹了關于微信小程序使用webview頁面轉pdf文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了原生JS實現加載進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
有10個復選框，用戶最多只能勾選3個，否則就灰掉所有復選框，具體實現思路及代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要通過動畫的示例來為大家詳細介紹一下JavaScript的函數封裝，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下2022-03-03
本篇文章主要是對javascript:json數據的頁面綁定示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
BootStrap Fileinput插件和Bootstrap table表格插件相結合實現文件上傳、預覽、提交的導入E
這篇文章主要介紹了BootStrap Fileinput插件和Bootstrap table表格插件相結合實現文件上傳、預覽、提交的導入Excel數據操作步驟,需要的朋友可以參考下2017-08-08
Firefox和Opera對PNG的支持非常的好，都是IE卻無視PNG圖片這一特性的“存在”，雖然IE7已經支持都是IE6還是不行。2009-09-09
這篇文章主要為大家詳細介紹了JavaScript實現移動端輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06