JavaScript의 마우스 드래그 이벤트-JS 튜토리얼-php.cn

JavaScript의 마우스 드래그 이벤트

PHPz

풀어 주다： 2018-10-10 17:57:21

앞으로

1218명이 탐색했습니다.

이 글은 주로 JavaScript의 마우스 드래그 이벤트에 대해 다루고 있습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

첫 번째 단계는 드래그된 요소가 절대적 위치에 있는지 아니면 상대적 위치에 있는지 정의하는 것입니다.

두 번째 단계는 여러 좌표의 개념을 명확히 하는 것입니다. 마우스를 눌렀을 때 포인터 좌표(이벤트) .pageX 및 event.pageY), 마우스를 놓을 때의 포인터 좌표, 드래그 앤 드롭한 요소의 원래 좌표, 드래그 앤 드롭 후 요소의 좌표

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
    position:absolute;
    width:200px;
    height:200px;
    overflow:hidden;
    padding:4px;
    border:solid 4px #59F182;}
#box img {width:100%;}
</style>
<script></script>
</head>
<body>
<p id="box" ><img src="images/bg.jpg" /></p>
<script>
// 初始化拖放对象
var box = document.getElementById("box");
	// 获取页面中被拖放元素的引用指针
box.style.position = "absolute";			// 绝对定位
// 初始化变量，标准化事件对象
var mx, my, ox, oy; 						// 定义备用变量
function e(event){ 							// 定义事件对象标准化函数
   if( ! event){ 							// 兼容IE浏览器
      event = window.event;
      event.target = event.srcElement;
      event.layerX = event.offsetX;
      event.layerY = event.offsetY;
   }
   event.mx = event.pageX || event.clientX + document.body.scrollLeft; 
	// 计算鼠标指针的x轴距离
   event.my = event.pageY || event.clientY + document.body.scrollTop; 
	// 计算鼠标指针的y轴距离
   return event; 							// 返回标准化的事件对象
}
// 定义鼠标事件处理函数
document.onmousedown = function(event){ 	// 按下鼠标时，初始化处理
   event = e(event); 						// 获取标准事件对象
   o = event.target; 						// 获取当前拖放的元素
   ox = parseInt(o.offsetLeft); 			// 拖放元素的x轴坐标
   oy = parseInt(o.offsetTop); 				// 拖放元素的y轴坐标
   mx = event.mx; 							// 按下鼠标指针的x轴坐标
   my = event.my; 							// 按下鼠标指针的y轴坐标
   document.onmousemove = move; 			// 注册鼠标移动事件处理函数
   document.onmouseup = stop; 				// 注册松开鼠标事件处理函数
}
function move(event){ 						// 鼠标移动处理函数
   event = e(event);
   o.style.left = ox + event.mx - mx  + "px";	// 定义拖动元素的x轴距离
   o.style.top = oy + event.my - my + "px";	// 定义拖动元素的y轴距离
}
function stop(event){ 							// 松开鼠标处理函数
   event = e(event);
   ox = parseInt(o.offsetLeft); 				// 记录拖放元素的x轴坐标
   oy = parseInt(o.offsetTop); 					// 记录拖放元素的y轴坐标
   mx = event.mx ; 								// 记录鼠标指针的x轴坐标
   my = event.my ; 								// 记录鼠标指针的y轴坐标
   o = document.onmousemove = document.onmouseup = null; 
	// 释放所有操作对象
}
</script>
</body>
</html>

로그인 후 복사

더 많은 관련 튜토리얼 보기 , JavaScript 비디오 튜토리얼

을 방문하세요.