<html> <head> <meta charset="UTF-8"> <style type="text/Css"> body{background-color:#000000;} .window{position:absolute;z-index:1;overflow:hidden;width:600px;height:400px;background-color:red;left: 0px;} .dragme{position:relative;background-image:url('img/testbg.png');width:800px;height:400px;} </style> <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script> <script type="text/javascript"> var isdrag=false; var tx,x; $(function(){ document.getElementById("moveid").addEventListener('touchend',function(){ sdrag = false; }); document.getElementById("moveid").addEventListener('touchstart',selectmouse); document.getElementById("moveid").addEventListener('touchmove',movemouse); }); function movemouse(e){ if (isdrag){ var n = tx + e.touches[0].pageX - x; $("#moveid").css("left",n); return false; } } function selectmouse(e){ isdrag = true; tx = parseInt(document.getElementById("moveid").style.left+0); x = e.touches[0].pageX; return false; } </script> </head> <body> <div align="left" class="window"> <div id="moveid" class="dragme"> 这是一个可以通过触摸屏拖动的demo<br> 这个demo花费了我半天时间，原因是以前从来没有做过面向触摸屏的Web，按说mousedown,mouseup,mousemove和touchstart，touchend，touchmove 之间是可以互通的，也就是说一般面向pc开发的mouse时间对touch事件有效，据说是效率有差异。但是pc上测试没有任何问题，在手机上就是无效。 然后…… 然后百度了很久很久…… </div> </div> </html>