移动触摸屏的div拖动Demo

时间 2021-01-30

标签 javascript css html java jquery 浏览器 ide 测试 url spa 栏目无线繁體版

原文原文链接

话说我刚刚从PC的Web开发转到移动的Web开发……javascript

当前移动Web开发不得不面对强大的流行的Android,IOS这两大触摸屏系统啊，毕竟这是热门啊，用户都在这里。css

此次由于开发须要，我得试着作一个背景能够拖动的div页面。当一切都在PC上作完以后，转到手机进行测试，居然无效啊，拖动无效。通过调试发现mousemove事件（还有mousedown,mouseup）的clientX的属性在PC端几款浏览器都没问题，在平板的Android浏览器和QQ浏览器下都是未定义undefined。html

当时想是否是由于event.clientX在移动端不支持，而后就试了一下offsetX和screenX，结果都同样，这个时候都快崩溃了我。java

按说mousedown,mouseup,mousemove和touchstart，touchend，touchmove之间是能够互通的，也就是说通常面向pc开发的mouse时间对touch事件有效，听说是效率有差别。可是pc上测试没有任何问题，在手机上就是无效。
而后百度了好久好久……jquery

终于在一个讨论touch相关事件的例子中看到别人已经通过测试的e.touches[0].pageX，光这个属性仍是不够的，发现使用jquery为div绑定touch事件后这个属性也是未定义，必须使用原生的addEventListener。浏览器

最后，贴上demo的代码，但愿给遇到一样问题的你提供帮助。ide

  
  
           
  
  
   
   
            
   
   <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-p_w_picpath: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>