可视区域内鼠标拖拽框

最新推荐文章于 2024-06-06 08:25:38 发布

springmoontree

最新推荐文章于 2024-06-06 08:25:38 发布

阅读量1.3k

点赞数

分类专栏： JavaScript的探索之路

本文链接：https://blog.csdn.net/qq_29999249/article/details/61421043

版权

JavaScript的探索之路专栏收录该内容

16 篇文章 0 订阅

订阅专栏

要想在通过鼠标来拖拽div，就要在鼠标点下的时刻获取光标与div的距离。然后在光标移动时设置div的left值为光标的left减去那个距离，设置div的top值为光标的top减去那个距离。但是div的left与top是相对于body（即整个页面），而光标的left与top却是相对于可视区域而言的。在没有滚动条时，两者在参考系是一样的；但是在滚动条出现以后两者的参考系就不同了。所以，有两种解决办法，要么把两者的参考系都变成body，要么把两者的参考系都变成可视区域。在这里，我采取了body作为参考系的方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标拖拽框</title>
	<style>
		body{
			height:1000px;
			width:1500px;
		}
		#box{
			position: absolute;
			top:0;
			left:0;
			background-color: red;
			width:100px;
			height:100px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="box">
	</div>
	<script>
		function getPos(){
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
			return{x: scrollLeft, y: scrollTop};
		}//用以获取滚动条的距离
		function getStyle(obj,name){
			if(obj.currentStyle){
				return obj.currentStyle[name];
			}
			else{
				return getComputedStyle(obj,false)[name];
			}
		}
		var oDiv = document.getElementById('box');
		var disx = 0;
		var disy = 0;
		oDiv.onmousedown = function(ev){
			var oEvent = ev || event;
			var pos = getPos();
			disx = pos.x+oEvent.clientX - parseInt(getStyle(oDiv,'left'));
			disy = pos.y+oEvent.clientY - parseInt(getStyle(oDiv,'top'));
			document.onmousemove = function(ev){
				var oEvent = ev || event;
				var pos = getPos(oEvent);
				var l = pos.x+oEvent.clientX - disx;
				var h = pos.y+oEvent.clientY - disy;
				if(l<pos.x){
					l = pos.x;
				}
				if (l>document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv,'width'))) {
					l = document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv,'width'));
				}
				if(h<pos.y){
					h = pos.y;
				}
				if (h>document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv,'height'))) {
					h = document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv,'height'));
				}
				oDiv.style.left = l + 'px';
				oDiv.style.top = h + 'px';
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
			return false;
		}

	</script>
</body>
</html>

springmoontree

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
可视区域内鼠标拖拽框

要想在通过鼠标来拖拽div，就要在鼠标点下的时刻获取光标与div的距离。然后在光标移动时设置div的left值为光标的left减去那个距离，设置div的top值为光标的top减去那个距离。但是div的left与top是相对于body（即整个页面），而光标的left与top却是相对于可视区域而言的。在没有滚动条时，两者在参考系是一样的；但是在滚动条出现以后两者的参考系就不同了。所以，有两种解决办法，
复制链接

扫一扫