javascript_javascript 스킬을 활용한 간단한 마우스 드래그 효과 예시-JS 튜토리얼-php.cn

javascript_javascript 스킬을 활용한 간단한 마우스 드래그 효과 예시

WBOY

풀어 주다： 2016-05-16 16:05:03

원래의

1255명이 탐색했습니다.

이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.