js实现鼠标拖动div

最新推荐文章于 2024-07-17 09:19:35 发布

七彩冰淇淋与藕汤

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量1.3k

点赞数

文章标签： javascript safari html

本文链接：https://blog.csdn.net/qq_36582776/article/details/123487309

版权

JavaScript div拖动鼠标事件动态样式前端开发

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

<body>
	<div id="div1" style="width: 200px;height: 200px;background-color: #444;top: 0;left: 0;position: absolute;margin: 0;"></div>
<!-- margin: 0 如果不设置后面取不到 -->
</body>
<script type="text/javascript">

	var div1=document.getElementById('div1')
	var down=false
	var mousetop=0
	var mouseleft=0
	window.onmousedown=function({x,y}){
		let divH=div1.clientHeight  //这四个不能写在外面
		let divW=div1.clientWidth   //这四个不能写在外面
		let top=div1.offsetTop   //这四个不能写在外面，div左上角距窗口左边距
		let left=div1.offsetLeft   //这四个不能写在外面，div左上角距除菜单栏窗口上边距
		if(y>=top&&y<=top+divH&&x>=left&&x<=left+divW){ //如果鼠标按下的位置在div内
			down=true //区分鼠标按着呢还是没按呢
			mousetop=y-parseInt(div1.style.marginTop)  //如果没设置margin:0这里获取不到
			mouseleft=x-parseInt(div1.style.marginLeft)
		}
	}
	window.onmousemove=function(event){
		if(down==true){
            //左margin等于鼠标移动时距离左窗口的实时距离减去鼠标距div左边框的距离
			div1.style.marginLeft=event.clientX-mouseleft+"px"  
			div1.style.marginTop=event.clientY-mousetop+"px"
		}
	}
	window.onmouseup=function({x,y}){
		down=false
	}
</script>
</html>