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程序设计有所帮助。