Js拖拽demo

最新推荐文章于 2025-05-23 14:23:42 发布

小城听风雨

最新推荐文章于 2025-05-23 14:23:42 发布

阅读量574

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript踩过的坑

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/a5252145/article/details/82191309

Javascript踩过的坑专栏收录该内容

39 篇文章

订阅专栏

该博客主要围绕Js拖拽demo展开，虽未给出具体内容，但可知与前端开发中JavaScript的拖拽功能相关，这在前端页面交互设计里较为常见，能提升用户体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 100px;
			height: 100px;
			background: #03ccbb;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body style="height: 3000px;">
	<div class="box"></div>
	
	<script>
		//获取盒子 
		var ele = document.querySelector('.box');

		// 移动最大宽高
		var maxW = document.documentElement.clientWidth - ele.offsetWidth;
		var maxH = document.documentElement.offsetHeight - ele.offsetHeight;

		ele.onmousedown=function(e){//在元素上按下鼠标
			e = e||window.event;
			//记录鼠标按下时，到元素边缘的距离
			var nX = e.offsetX;
			var nY = e.offsetY;

			document.onmousemove=function(e){//在document范围移动鼠标
				e = e||window.event;
				//计算元素的偏移量
				var nLeft = e.pageX - nX;
				var nTop = e.pageY - nY;

				//限制元素的最大最小偏移量
				nLeft = Math.min(maxW,Math.max(0,nLeft));
				nTop = Math.min(maxH,Math.max(0,nTop));


				ele.style.left = nLeft+"px";
				ele.style.top = nTop+"px";
			}
		}
		// 鼠标已开，move事件消失
		document.onmouseup=function(){
			document.onmousemove = null;
		}
	</script>

</body>
</html>