js를 활용한 div 드래그 효과 구현 예시 (PC, 모바일 호환)
- 怪我咯원래의
- 2017-03-29 15:47:071428검색
얼마전에 간단한 p드래그 효과를 작성했는데, 어제 프로젝트에서도 비슷한 요구사항이 필요해서 그냥 사용했습니다. 그런데 모바일 단말기를 사용하다가 문제가 생겼습니다. 이동할 때 사용되는 세 가지 이벤트: mousedown, mousemove, mouseup는 모바일 단말기에 아무런 영향을 미치지 않습니다. 결국, 모바일 단말기에는 마우스가 없습니다. 정보를 확인한 결과, 모바일 단말기에서 해당 이벤트는 touchstart, touchmove, touchend 이벤트라는 것을 알았습니다. 주목해야 할 또 다른 점은 현재 마우스의 좌표는 PC 측에서 얻습니다: event.clientX 및 event.clientY, 좌표 위치는 모바일 측에서 얻습니다: event.touches[0].clientX 및 event.touches [0].클라이언트Y.
이 효과를 얻는 방법에 대해 먼저 살펴보겠습니다.
PC 버전
모바일 버전
먼저 PC를 예로 들어 마우스를 누른 다음(mousedown 이벤트) 이동하고(mousemove 이벤트) 마지막으로 마우스를 드래그하는 과정을 분석해 보겠습니다. 릴리스(mouseup 이벤트)하려면 먼저 마우스가 눌렸는지 여부를 기록하기 위해 변수 를 설정해야 합니다. 그런 다음 마우스의 현재 좌표를 기록해야 합니다. 마우스가 움직이기 시작하면 마우스의 현재 좌표에서 마우스를 눌렀을 때의 좌표를 더한 값을 사용합니다. p와 상위 요소 사이의 거리 마우스를 놓았을 때 마우스가 눌려졌음을 나타내도록 표시를 변경합니다.
코드를 살펴보겠습니다:
var flag = false; //是否按下鼠标的标记
var cur = { //记录鼠标按下时的坐标
x:0,
y:0
}
var nx,ny,dx,dy,x,y ;
//鼠标按下时的函数
function down(){
flag = true; //确认鼠标按下
cur.x = event.clientX; //记录当前鼠标的x坐标
cur.y = event.clientY; //记录当前鼠标的y坐标
dx = p2.offsetLeft; //记录p当时的左偏移量
dy = p2.offsetTop; //记录p的上偏移量
}
//鼠标移动时的函数
function move(){
if(flag){ //如果是鼠标按下则继续执行
nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
x = dx+nx; //p在x轴的偏移量加上鼠标在x轴移动的距离
y = dy+ny; //p在y轴的偏移量加上鼠标在y轴移动的距离
p2.style.left = x+"px";
p2.style.top = y +"px";
}
}
//鼠标释放时候的函数
function end(){
flag = false; //鼠标释放
}
그런 다음 이 p에 이벤트를 추가하고 모바일 측에서 다른 이벤트를 살펴보겠습니다. 우선 이벤트가 다릅니다. 모바일 측에서 touchatart, touchmove 및 touchend만 추가하면 됩니다. 모바일 측에서 좌표를 얻는 시간도 다릅니다: event.touches[0] .clientX 및 event.touches[0 ].clientY, 이것도 매우 간단합니다. PC라면 event.touches를 사용하세요.
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
또 한 가지 주의할 점은 모바일 단말기에서 p를 드래그하면 모바일 페이지가 자동으로 슬라이딩 효과를 내기 때문에 touchmove to에서 페이지에 기능을 추가해야 한다는 점입니다. 기본 이벤트를 방지합니다.
다음은 전체 코드입니다. Chrome에서 모바일 테스트를 시뮬레이션할 수 있습니다. 보려면 여기를 클릭하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>适配移动端的拖动效果</title>
<style>
#p1{
height: 1000px;
}
#p2{
position: absolute;
top:0;
left:0;
width: 100px;
height: 100px;
background: #bbbbbb;
}
</style>
</head>
<body>
<p id="p1">
<p id="p2"></p>
</p>
<script>
var flag = false;
var cur = {
x:0,
y:0
}
var nx,ny,dx,dy,x,y ;
function down(){
flag = true;
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
cur.x = touch.clientX;
cur.y = touch.clientY;
dx = p2.offsetLeft;
dy = p2.offsetTop;
}
function move(){
if(flag){
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
nx = touch.clientX - cur.x;
ny = touch.clientY - cur.y;
x = dx+nx;
y = dy+ny;
p2.style.left = x+"px";
p2.style.top = y +"px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove",function(){
event.preventDefault();
},false);
}
}
//鼠标释放时候的函数
function end(){
flag = false;
}
var p2 = document.getElementById("p2");
p2.addEventListener("mousedown",function(){
down();
},false);
p2.addEventListener("touchstart",function(){
down();
},false)
p2.addEventListener("mousemove",function(){
move();
},false);
p2.addEventListener("touchmove",function(){
move();
},false)
document.body.addEventListener("mouseup",function(){
end();
},false);
p2.addEventListener("touchend",function(){
end();
},false);
</script>
</body>
</html>위 내용은 js를 활용한 div 드래그 효과 구현 예시 (PC, 모바일 호환)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!