星空网 > 软件开发 > Java

touchstart、touchmove、touchend 实现移动端上的触屏拖拽

touchstart、touchmove、touchend 实现移动端上的触屏拖拽

 

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

 

注:本例在谷歌浏览器的模拟器上测试,未进行真机测试!




原标题:touchstart、touchmove、touchend 实现移动端上的触屏拖拽

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

进口奶粉:https://www.goluckyvip.com/tag/34818.html
进口配额:https://www.goluckyvip.com/tag/34819.html
进口清关空运:https://www.goluckyvip.com/tag/34820.html
进口外贸清关:https://www.goluckyvip.com/tag/34821.html
进口信用证:https://www.goluckyvip.com/tag/34822.html
进口业务清关:https://www.goluckyvip.com/tag/34823.html
三亚有哪些酒店值得入住?:https://www.vstour.cn/a/366173.html
零售晚报:丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836649.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流