이 글의 예제는 참고용으로 JavaScript에서 마우스 드래그 효과를 구현하기 위한 구체적인 코드를 공유합니다
.
이 실험의 어려운 점은 상자와 마우스의 상대적 위치를 변경하지 않고 유지하는 것입니다. 마우스를 누르고 움직여 드래그 효과를 얻으려면 어떻게 해야 합니까
?
마우스 누르기, 마우스 이동, 마우스 들어올리기를 각각 나타내는 onmousedown , onmousemove 및 onmouseup 세 가지 함수를 사용해야 합니다.
마우스 누르기 의 콜백 함수에서는 clientX 및 clientY 통해 마우스의 초기 위치를 얻어야 합니다. offsetLeft 및 offsetTop 통해 상자의 초기 위치를 얻은 다음
마우스 이동 의 콜백 함수에서
마우스의 초기 위치와 상자의 초기 위치 간의 차이를 계산합니다. 마우스 위치와 이전에 계산된 위치 간의 차이를 기반으로 상자를 만든 다음 왼쪽 및 위쪽 값을 변경합니다. 위치를 절대값
으로 설정하는 것을 잊지 마세요(방금 잊어버렸기 때문입니다...).
마우스 리프트 , onmousemove 및 onmouseup 값을 null로 설정하여 마우스 움직임과 마우스 리프트를 지워야 합니다
. 또한 주의하세요! ! !
마우스 이동 기능과 마우스 들어올리기 기능 모두 마우스 누르기 기능에 작성해야 합니다. 왜냐하면 마우스 누르기 동작 이후의 후속 동작을 설계해야 하기 때문입니다. 매우 중요한 점은
마우스 누르기 기능은 p이고 마우스는
이동과 마우스 올리기는p에서 마우스가 이동한다는 의미가 아니라 전체 페이지를 이동한다는 의미이므로
문서에 있습니다
.핵심 사항은 다음과 같습니다.
<!DOCTYPE html>
<html>
<머리>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>문서</title>
<스타일>
#상자{
너비: 100px;
높이: 100px;
배경색: 청록색;
테두리 반경: 14px;
상자 그림자: 2px 2px 6px rgba(0,0,0,.3);
/* 좋은 사람들은 위치를 설정하지 않고 왼쪽으로 이동하고 변경하고 싶어합니다. . . */
위치: 절대;
}
</style>
</head>
<본문>
<div id="상자"></div>
<스크립트>
let box=document.getElementById("box");
box.onmousedown=function(이벤트){
disx=event.clientX-box.offsetLeft;
disy=event.clientY-box.offsetTop을 보자;
//box.onmousemove가 아니라 document.onmousemove입니다.
document.onmousemove=function(이벤트){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//omniusedown으로 작성 document.onmouseup=function(){
//둘 다 null로 설정되어야 합니다.
document.onmousemove=null;
document.onmouseup=null;
거짓을 반환;
}
}
</script>
</body>
</html> 관련 권장사항: [JavaScript 비디오 튜토리얼]
위는 마우스 드래그 이벤트를 시뮬레이션하기 위한 js의 자세한 내용입니다(그림 및 텍스트의 예 포함). 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요. !
