suchen

Heim >Web-Frontend >js-Tutorial >Javascript implementiert die Touch-Screen-Drag-Funktion auf mobilen Endgeräten. Javascript-Kenntnisse

Javascript implementiert die Touch-Screen-Drag-Funktion auf mobilen Endgeräten. Javascript-Kenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:12:151650Durchsuche

Dieser Artikel beschreibt die JavaScript-Implementierung der Touch-Screen-Drag-Funktion auf dem mobilen Endgerät. Der spezifische Inhalt ist wie folgt

Rendering:

Implementierungscode: 

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein Einführungs-Tutorial zum Erlernen der JSX-Syntax im React Framework von JavaScript_GrundkenntnisseNächster Artikel：Ein Einführungs-Tutorial zum Erlernen der JSX-Syntax im React Framework von JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen