javascript_javascript 스킬을 활용한 간단한 마우스 드래그 효과 예시
- WBOY원래의
- 2016-05-16 16:05:031256검색
이 기사의 예에서는 JavaScript를 사용하여 간단한 마우스 드래그 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
요소를 마우스로 드래그하여 웹페이지의 아무 곳에나 배치하는 것은 매우 일반적입니다. 예를 들어 많은 블로그 템플릿 섹션은 자체적으로 해당 위치로 드래그될 수 있습니다.
마우스 드래그 효과를 얻을 수 있는 간단한 코드를 작성해 보겠습니다.
마우스를 눌렀을 때 마우스의 현재 위치와 요소의 왼쪽 거리의 차이를 기록합니다.
마우스가 움직이면 요소의 위치, 즉 마우스의 위치에 방금 차이를 뺀 값이 할당됩니다.
마우스를 놓으면 마우스 움직임과 마우스 놓기에 null을 할당하여 더 이상의 작업을 수행하지 않도록 합니다.
포인트 1:
disx = oevent.clientX - box.offsetLeft;
드래그할 때 요소에서 마우스 포인트의 위치를 결정하려면 마우스 위치에서 요소의 왼쪽 거리를 뺀 값입니다.
포인트 2:
box.style.left = oevent.clientX - disx + "px";
드래그할 때 요소의 위치, 마우스의 현재 위치에서 방금 계산한 값을 뺀 값입니다.
알겠습니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
var disx =0;
var disy = 0;
box.onmousedown = function(evt){
var oevent = evt || window.event;
disx = oevent.clientX - box.offsetLeft;
disy = oevent.clientY - box.offsetTop;
document.onmousemove = function(evt){
var oevent = evt || window.event;
box.style.left = oevent.clientX - disx + "px";
box.style.top = oevent.clientY - disy + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>
위에서 마우스 드래그 범위에 제한이 없고 가끔 드래그 창이 밖에서 보이지 않는 경우가 있어 다시 개선하고 싶습니다. 범위를 제한해보자
포인트 1: 다음과 같이 요소의 왼쪽 위치가 0보다 작으면 0의 값을 할당합니다. 시각적 창의 크기에서 요소 자체의 너비를 뺀 것보다 큰 경우에는 시각적 창 크기에서 요소 자체의 너비를 뺀 값입니다.
var boxl = oevent.clientX - disx;
if(boxl < 0){
boxl =0;
}else if(boxl > vieww - box.offsetWidth){
boxl = vieww - box.offsetWidth;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
var disx =0;
var disy = 0;
box.onmousedown = function(evt){
var oevent = evt || window.event;
disx = oevent.clientX - box.offsetLeft;
disy = oevent.clientY - box.offsetTop;
document.onmousemove = function(evt){
var oevent = evt || window.event;
var boxl = oevent.clientX - disx;
var boxt = oevent.clientY - disy
var vieww = document.documentElement.clientWidth || document.body.clientWidth;
var viewh = document.documentElement.clientHeight || document.body.clientHeight;
if(boxl < 0){
boxl =0;
}else if(boxl > vieww - box.offsetWidth){
boxl = vieww - box.offsetWidth;
}
if(boxt < 0){
boxt =0;
}else if(boxt > viewh - box.offsetHeight){
boxt = viewh- box.offsetHeight;
}
box.style.left = boxl + "px";
box.style.top = boxt + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.