实现一个触摸屏幕上可拖拽的正方形_触摸屏宏指令如何显示正方形-CSDN博客

本文链接：https://blog.csdn.net/luckyone1111/article/details/78463605

<!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>