javascript實現(xiàn)移動端上的觸屏拖拽功能
更新時間：2016年03月04日 09:13:14 作者：Cakty、Riven
這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)移動端上的觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文是分享了javascript實現(xiàn)移動端上的觸屏拖拽功能，具體內(nèi)容如下
效果圖：
實現(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é)點
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;
//阻止頁面的滑動默認事件
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>
以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設計有所幫助。
相關文章
Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊列詳解
要了解JavaScript數(shù)組的堆棧和隊列方法的操作,需要先對堆棧和隊列基礎知識有所了解,下面這篇文章主要給大家介紹了關于Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊列的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
微信分享的標題、縮略圖、連接及描述該如何設置，這個問題確實難道不少朋友，下面有個示例，大家可以看看2014-10-10
最近遇到這樣的需求：顯示音樂播放按鈕、可手動拖拽進度條；頁面中含多個音樂，播放當前音樂時暫停其他音樂播放。 這篇文章主要介紹了微信小程序自定義音樂進度條的實例代碼,需要的朋友可以參考下2018-08-08
javascript 刪除select中的所有option的實例
這篇文章主要介紹了javascript 刪除select中的所有option的實例的相關資料,希望通過本文能幫助到大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了不同編碼的頁面表單數(shù)據(jù)亂碼問題解決方法,本文使用一個表單不常用屬性accept-charset解決了這個問題,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了DWR3 訪問WEB元素的兩種方法實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了代碼整潔之道(重構(gòu))，不管對于何種語言，重構(gòu)都是軟件開發(fā)過程中不可或缺的一部分，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
js中用window.open()打開多個窗口的name問題
這篇文章主要介紹了js中用window.open()打開多個窗口的問題,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單留言板案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
標識符指的是javascript中定義的符號，標識符可以由任意順序的大小寫字母、數(shù)字、下劃線和美元符號組成，但標識符不能以數(shù)字開頭，也不能是javascript中的保留關鍵字。并且要注意，javascript是嚴格區(qū)分大小寫的。2015-06-06