可移动的div

2024-01-09 19:44:33

一、实验题目

做一个可移动的div

二、实验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: rebeccapurple;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			let div=document.querySelector("div")
			div.style.position="absolute"
			w=parseInt(getComputedStyle(div).width)
			h=parseInt(getComputedStyle(div).height)
			div.onmousedown=function(event){
				div.onmousemove=function(ev){
					console.log(ev.offsetX)
					console.log(ev.offsetY)
					div.style.left=(ev.pageX-w/2)+"px"
					div.style.top=(ev.pageX-h/2)+"px"
				}
			}
			div.onmouseup=function(){
				div.onmousemove=null
			}
		</script>
	</body>
</html>

三、实验效果

文章来源:https://blog.csdn.net/2301_80177550/article/details/135487063
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。