鼠标拖拽解决与对象相对位置不变

最新推荐文章于 2022-10-26 09:14:31 发布

优价实习

最新推荐文章于 2022-10-26 09:14:31 发布

阅读量400

点赞数

文章标签： javascript html html5 es6

本文链接：https://blog.csdn.net/weixin_44828588/article/details/113966874

版权

JavaScript DOM操作拖拽效果事件监听前端开发

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#box1{
			width:100px;
			height: 100px;
			background-color: gray;
			position: absolute;
			
		}
		#box2{
			width:100px;
			height: 100px;
			left:200px;
			background-color: green;
			position: absolute;
			
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			
			/*
			 * 拖拽box1元素
			 * -拖拽流程
			 * 	1.鼠标按下，开始拖 onmousedown
			 * 	2.鼠标移动，跟随移动onmousemove
			 * 	3.当鼠标松开，被拖拽元素固定在当前位置onmouseup
			 */
			 var box1=document.getElementById("box1")
			 box1.onmousedown=function(event){
			 	event=event||window.event
			 	//鼠标与对像相对位置不变
			 	var ol=event.clientX-box1.offsetLeft
			 	var ot =event.clientY-box1.offsetTop
			 	document.onmousemove=function(event){
			 		event=event||window.event
			 		var x=event.clientX;
			 		var y=event.clientY;
			 		//box1的位置
			 		box1.style.left=event.clientX+"px"-ol
			 		box1.style.top=event.clientY+"px"-ot
			 		console.log(box1.style.left)
			 		
			 	}
			 }
			 document.onmouseup=function(){
			 	//当鼠标松开，元素固定在当前位置
			 	//取消document。onmousemove=null
			 	/*
			 	 * 兄弟元素会出现问题，当在鼠标兄弟元素时，触发兄第元素的mouseup
			 	 * 因此这里松手按钮要给整个页面，这样子无论在哪里松手都会停，但
			 	 * 如果完全重合就无法在脱出
			 	 */
			 	document.onmousemove=null;
			 	document.onmouseup=null;
			 }
			 //拖拽事件相对位置调整
		}
	</script>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

在这里插入图片描述