<!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>
实现一个触摸屏幕上可拖拽的正方形
最新推荐文章于 2021-06-27 22:34:50 发布