移動觸摸屏的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>