<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
}
#moveid {
width: 50px;height:50px;background-color: aqua;border-radius: 100%;
position: relative;
}
</style>
</head>
<body>
<div id="moveid">
</div>
<script src="./touch_move.js"></script>
</body>
</html>
let BodyWidth = document.body.clientWidth;
let BodyHeight =document.body.offsetHeight;
let moveId = document.getElementById('moveid');
console.log(BodyHeight)
// 初始化位置
moveId.style.left = BodyWidth - 64+"px";
moveId.style.top = 14+"px";
// 监听移动事件
moveId.addEventListener('touchmove',touch,false);
function touch(e){
switch(e.type){
case "touchmove" :
let x = e.touches[0].clientX -25;
let y = e.touches[0].clientY -25;
e.preventDefault();
moveId.style.left=x+"px";
moveId.style.top = y+"px";
if(x<0){
moveId.style.left=0;
}else if(x>BodyWidth-64){
moveId.style.left=BodyWidth-64+"px";
}
if(y<0){
moveId.style.top=15+"px";
}else if(y>BodyHeight-64){
moveId.style.top=BodyHeight-64+"px";
}
}
}