js鼠标拖动事件

第一步，定义被拖放的元素为绝对定位或者相对定位

第二部，清楚几个坐标的概念：按下鼠标时指针坐标（event.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>
<div id="box" ><img src="images/bg.jpg" /></div>
<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>

猜你喜欢