<!DOCTYPE html>
<html>
<head>
<title>實現一個觸摸屏幕上可拖拽的正方形</title>
<meta name="viewport" content="width=device-width"/>
<style>
#container {
background-color: black;
height:100px;
width:100px;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 獲取container節點
var container = document.getElementById("container");
var oW,oH;
// 綁定touchstart事件
container.addEventListener("touchstart", function(e) {
var touches = e.touches[0];
objW = touches.clientX - container.offsetLeft;//clientX 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（或客戶區）的水平座標
objH = touches.clientY - container.offsetTop;//obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置
//阻止頁面的滑動默認事件
document.addEventListener("touchmove",function defaultEvent(e) {
e.preventDefault();
},false);
},false);
// 綁定touchmove事件
container.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var objLeft = touches.clientX - objW;//objW爲鼠標以物體爲父座標系的水平位置
var objTop = touches.clientY - objH;//objH物體上邊緣距離面板的距離
if(objLeft < 0) {
objLeft = 0;
}else if(objLeft > document.documentElement.clientWidth - container.offsetWidth) { //clientWidth內容可視區域的寬度
objLeft = (document.documentElement.clientWidth - container.offsetWidth);//container.offsetWidth控件自身的絕對寬度
}
if(objTop < 0) {
objTop = 0;
}else if(objTop > document.documentElement.clientHeight - container.offsetHeight) {
objTop = (document.documentElement.clientHeight - container.offsetHeight);//document.documentElement是文檔對象根節點(html)的引用
}
container.style.left = objLeft + "px";
container.style.top = objTop + "px";
},false);
// 綁定touchend事件
container.addEventListener("touchend",function() {
document.removeEventListener("touchmove",function defaultEvent(e) {
e.preventDefault();
},false);
},false);
</script>
</body>
</html>
實現一個觸摸屏幕上可拖拽的正方形
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,