Home > Article > Web Front-end > Mouse drag event in JavaScript

Mouse drag event in JavaScript

PHPzforward: 2016-05-16 19:27:201170browse

This article mainly talks about mouse drag events in JavaScript. Friends who are interested can refer to it. I hope it can help you!

The first step is to define whether the dragged element is absolutely positioned or relatively positioned

The second step is to clarify the concepts of several coordinates: the pointer coordinates when the mouse is pressed (event.pageX and event.pageY), the pointer coordinates when the mouse is released, the original coordinates of the dragged and dropped element, and the coordinates of the element after dragging and dropping

<!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>

For more related tutorials, please visit JavaScript video tutorial

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Client code for printing/preview/setting_javascript skillsNext article：Client code for printing/preview/setting_javascript skills

See more

Mouse drag event in JavaScript

Related articles