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

2019-11-20 10:27:09

字体：大中小

来源：转载

供稿：网友

本文是分享了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程序设计有所帮助。

上一篇：JavaScript模拟鼠标右键菜单效果

下一篇：基于zepto的移动端轻量级日期插件--date_picker