집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript는 모바일 단말기에 터치스크린 드래그 기능을 구현합니다_javascript 기술

JavaScript는 모바일 단말기에 터치스크린 드래그 기능을 구현합니다_javascript 기술

WBOY원래의: 2016-05-16 15:12:151625검색

이 글에서는 모바일 단말기의 터치스크린 드래그 기능에 대한 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의 React 프레임워크에서 JSX 구문을 배우기 위한 입문 튜토리얼_기본 지식다음 기사：JavaScript의 React 프레임워크에서 JSX 구문을 배우기 위한 입문 튜토리얼_기본 지식

JavaScript는 모바일 단말기에 터치스크린 드래그 기능을 구현합니다_javascript 기술

관련 기사