让小球在浏览器可视区域内拖拽自如

Ovee

于 2020-11-18 23:43:44 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识点文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/pipi1512/article/details/109791338

前端知识点专栏收录该内容

2 篇文章

订阅专栏

博客涉及JavaScript、HTML和CSS相关信息技术内容，但具体内容未给出。这三种技术是前端开发的重要组成部分，JavaScript用于实现交互效果，HTML构建网页结构，CSS负责页面样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	var obj  = document.getElementsByClassName('qiu')[0];
			obj.addEventListener('mousedown',function(event){
			    //获取浏览器窗口宽度 和 高度
				let clientW = window.innerWidth;
				let clientH = window.innerHeight;
				//获取当前元素的宽高
				let elW = obj.offsetWidth;
				let elH = obj.offsetHeight;
				
				//算出鼠标相对元素的位置
				let pointX = event.clientX - obj.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
				let pointY = event.clientY - obj.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
				document.onmousemove = (e)=>{
				    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
				    let left = e.clientX - pointX;
				    let top = e.clientY - pointY;
					left = left<0 ? 0 : left;
					top = top<0 ? 0 : top;
					left = left > (clientW - elW) ? (clientW - elW)  :left 
					top = top > (clientH - elH) ? (clientH - elH)  :top
				    //移动当前元素
				    obj.style.left = left + 'px';
				    obj.style.top = top + 'px';
				};
				document.onmouseup = (e) => {
				    document.onmousemove = null;
				    document.onmouseup = null;
				};
			})