实现点击移动

最新推荐文章于 2023-04-03 21:21:49 发布

qq_38677540

最新推荐文章于 2023-04-03 21:21:49 发布

阅读量268

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_38677540/article/details/108693263

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
     #box{
     	width: 200px;
     	height: 200px;
     	border: 1px solid #ccc;
     	position: absolute;
     	top: 20%;
     	left: 10%;
     }
     #tops{
     	width: 200px;
     	height: 30px;
     	background-color: #ccc;
     }
	</style>
</head>
<body>
	<div id="box">
	     <div id="tops"></div>
		
	</div>
</body>
<script>
	let box=document.getElementById('box')
    let tops=document.getElementById('tops')
    //鼠标在拖动条上按下
    tops.onmousedown=(event)=>{
    	console.log(event)
    		let  e=event ||window.event
    		//获取鼠标在页面上的位置
       	let pageX=e.pageX || e.clientX+document.documentElement.scrollLeft;
       	let pageY=e.pageY || e.clientY+document.documentElement.scrollTop
       	//获取鼠标在按下一瞬间在盒子中的位置
       	let boxX=pageX-box.offsetLeft
       	let boxY=pageY-box.offsetTop
       //鼠标在页面上移动，让box也跟着移动
       document.onmousemove=(event)=>{
       	let  e=event ||window.event
       

       	//获取鼠标在页面上的位置
       	let pageX=e.pageX ||e.clientX+document.documentElement.scrollLeft;
       	let pageY=e.pageY ||e.clientY+document.documentElement.scrollTop;
       	//让box跟着鼠标移动
       	box.style.left=pageX+'px'
       	box.style.top=pageY+'px'
       }
    }
    document.onmouseup=()=>{
    	document.onmousemove=null
    }
</script>
</html>

qq_38677540

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现点击移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 200px; height: 200px; border: 1px solid #ccc; position: absolute; t.
复制链接

扫一扫

专栏目录