移动端（五）盒子拖拽

最新推荐文章于 2023-03-27 15:32:31 发布

李不烦

最新推荐文章于 2023-03-27 15:32:31 发布

阅读量298

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/95784169

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

拖拽的核心：元素最终位置 =元素初始位置 + 鼠标距离差

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			元素初始位置 + 鼠标距离差 = 元素最终位置
		-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				position: absolute;
				width: 200px;
				height: 200px;
				background: greenyellow;
			}
			#others{
				position: absolute;
				top: 300px;
				left: 400px;
				width: 200px;
				height: 200px;
				background: palevioletred;
			}
		</style>
	</head>
	<body>
		
		<div id="box"></div>
		<div id="others"></div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('box');
		
		//定义元素初始位置
		var elementPoint = {top:0,left:0};
		//定义鼠标初始位置
		var startP = {top:0,left:0};
		
		//鼠标按下
		box.onmousedown = function(event){
			event = event || window.event;
			
			//元素初始位置
			//offsetTop = 子元素与父元素的距离
			elementPoint.top = box.offsetTop;
			elementPoint.left = box.offsetLeft;
			
			//鼠标初始位置
			startP.top = event.clientY;
			startP.left = event.clientX;
				
			document.onmousemove = function(event){
				event = event || window.event;
				
				//鼠标结束位置
				var endP = {top:0,left:0};
				endP.top = event.clientY;
				endP.left = event.clientX;
				
				//鼠标距离差
				var disX = endP.left - startP.left;
				var disY = endP.top - startP.top;
				
				//元素最终位置
				box.style.left = disX + elementPoint.left + 'px';
				box.style.top = disY + elementPoint.top + 'px';
				
			};	
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			};
			
			//取消系统默认行为
			return false;
		};
		
		
		
		
	</script>
</html>

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端（五）盒子拖拽

拖拽的核心：元素最终位置 =元素初始位置 + 鼠标距离差<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <...
复制链接

扫一扫