JS 모 바 일 터치 스크린 드래그 기능 구현
<div id="div1"></div>2.css
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#div1 {
width: 50px;
height: 50px;
background: cyan;
position: absolute;
}
var div1 = document.querySelector('#div1');
// ，
var maxW = document.body.clientWidth - div1.offsetWidth;
var maxH = document.body.clientHeight - div1.offsetHeight;
// ， div
div1.addEventListener('touchstart', function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = touch.clientX - div1.offsetLeft;
oT = touch.clientY - div1.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
});
// ，
div1.addEventListener('touchmove', function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
var oLeft = touch.clientX - oL;
var oTop = touch.clientY - oT;
if(oLeft < 0) {
oLeft = 0;
} else if(oLeft >= maxW) {
oLeft = maxW;
}
if(oTop < 0) {
oTop = 0;
} else if(oTop >= maxH) {
oTop = maxH;
}
div1.style.left = oLeft + 'px';
div1.style.top = oTop + 'px';
});
//
div1.addEventListener('touchend', function() {
document.removeEventListener("touchmove", defaultEvent);
});
//
function defaultEvent(e) {
e.preventDefault();
}
4.몇 시 설명
터치 스크린 폰 엔 드 용 손가락 사건 에 대해 서 는 PC 엔 드 용 마우스 사건 에 대해 서도 원리 가 같다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 가 모 바 일 터치 스크린 드래그 기능 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 스위치 끌기 효과 구현본고는 Vue가 스위치 버튼의 드래그 효과를 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다. css: html: js: 이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
