javascript实现移动端上的触屏拖拽功能

前端技术 2023/09/08 JavaScript

本文是分享了javascript实现移动端上的触屏拖拽功能，具体内容如下

效果图：

实现代码：

<!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>
  // 获取节点
  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>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/21363

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案