精确定位以及js实现拖动

最新推荐文章于 2022-11-15 12:29:52 发布

唐宋元明清其

最新推荐文章于 2022-11-15 12:29:52 发布

阅读量937

点赞数 1

分类专栏： js 文章标签：定位

本文链接：https://blog.csdn.net/Q846169253/article/details/82052786

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下文中的所有event都指的是跨浏览器的event对象，即DOM事件的event，IE事件为window.event.

事件的各种坐标

1. clientX clientY

event.clientX;

event.clientY;

鼠标相对于浏览器窗口可视区域的水平，垂直距离。（可视区域不包括工具栏和滚动条）

注：如果鼠标不动，滚动滚轮，再次点击，值不变

2. pageX pageY

event.pageX;

event.pageY;

页面坐标，相对于文档的坐标，左上角为(0,0)，左、上为负，右、下为正，

注：pageX=clientX+scrollLeft pageY=clientY+scrollTop

也就是说： pageX 和 pageY获取的是相对文档高度，可以理解为距body最左上角的位值

3. screenX , screenY

event.screenX;

event.screenY;

相对于屏幕的坐标，包括浏览器工具栏，包括工具栏上方的任何其他内容

4. offsetX offsetY

event.screenX;

event.screenY;

鼠标光标相对于目标元素边界的水平和垂直坐标(如果不存在任何容器，例如它是window上的监听事件，那么它和e.pageX , e.pageY是等效的。)

2、元素大小

DOM中没有规定如何确定页面中元素的大小，IE引入了一些属性，所以width和height是基于IE盒模型，即外盒大小=内容+margin

元素的可见大小由其高度/宽度决定，包括所有内边距，滚动条，和边框大小。

1. 偏移量 offset dimension

element.offsetHeight：元素在垂直方向上占用的空间大小，包括元素高度（内容+padding+border）和可见的水平滚动条的高度

element.offsetWidth：元素在水平方向上占用的空间大小，包括元素宽度（内容+padding+border）和可见的垂直滚动条的高度

element.offsetLeft：元素的左外边框距离其包含元素的左内边框的像素距离

element.offsetTop：元素的上外边框距离其包含元素的上内边框见的像素距离

offsetParent：距离最近的拥有大小的祖先节点

下面代码将算出某个元素在页面上的偏移量，思路是将该元素的offsetLeft和offsetTop与其offsetParent的对应元素相加，一直循环至根节点，就可以得到一个基本准确的值：

function getElementOffset(element) {

var offset = {

acturalLeft: element.offsetLeft,

acturalTop: element.offsetTop

}

var current = element.offsetParent;

while(current != null) {

offset.acturalLeft += current.offsetLeft;

offset.acturalTop += current.offsetTop;

current = current.offsetParent;//让current等于其offsetParent，继续循环，直到current=null，即循环到了根元素，结束循环

}

return offset;

}

注意：

所有上述偏移量都是只读的，并且每次访问它们都需要重新计算，因此，应该避免重复访问这些属性；如果要重复使用它们，可以将其保存在局部变量中，提高性能！

2、客户区大小 clientWidth和clientHeight

客户区大小指的是元素内容及其内边距所占据的大小。不包括滚动条

element.clientWidth;// = 内容+左右内边距

element.clientHeight;//= 内容+上下内边距

3、滚动大小 scroll dimension

滚动大小指的是包含滚动内容的元素的大小

element.scrollHeight;//没有滚动条的情况下，元素内容的总高度

element.scrollWidth;//没有滚动条的情况下，元素内容的总宽度

element.scrollLeft;//被隐藏在内容区域左侧的像素数

element.scrollTop;//被隐藏在内容区上方的像素数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
		  div{width: 300px; height: 40px; border: 5px solid cadetblue; background: orange; position: absolute;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oCl=document.getElementById('cl');
				var disx=0;//用来装鼠标在拖动元素中的相对x轴位置
				var disy=0;//用来装鼠标在拖动元素中的相对y轴位置
				
				oCl.onmousedown=function(ev){//鼠标按下时换获取坐标
					var oEvent=ev || event;//Event的兼容性处理
					disx=oEvent.clientX-oCl.offsetLeft;//求出鼠标在拖动元素中的相对x轴位置
					disy=oEvent.clientY-oCl.offsetTop;//求出鼠标在拖动元素中的相对y轴位置
					document.onmousemove=function(ev){//鼠标移动时赋给元素坐标
						var oEvent=ev || event;
						var left=oEvent.clientX-disx;//鼠标当时的x坐标减鼠标在拖动元素中的相对x轴的值
						var top=oEvent.clientY-disy;//<鼠标当时的y坐标减去鼠标在拖动元素中的相对y轴的值
						if(left<0){
							left=0;//防止移出屏幕左侧外
						}
						else if(left>document.documentElement.clientWidth-oCl.offsetWidth){
							left=document.documentElement.clientWidth-oCl.offsetWidth;//防止移出屏幕右侧外
						}
						if(top<0){
							top=0;//防止移出上方
						}
						else if(top>document.documentElement.clientHeight-oCl.offsetHeight){
							top=document.documentElement.clientHeight-oCl.offsetHeight;//防止移出下方
						}
						oCl.style.left=left+'px';
						oCl.style.top=top+'px';//赋值
					}
				};
				document.onmouseup=function(){
					document.onmousemove=null;//防止鼠标移动过快脱出元素范围而无法继续控制
				}
			}
		</script>
	</head>
	<body>
		<div id="cl"></div>
	</body>
</html>

唐宋元明清其

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精确定位以及js实现拖动

下文中的所有event都指的是跨浏览器的event对象，即DOM事件的event，IE事件为window.event. 事件的各种坐标 1. clientX clientYevent.clientX; event.clientY;鼠标相对于浏览器窗口可视区域的水平，垂直距离。（可视区域不包括工具栏和滚动条）注：如果鼠标不动，滚动滚轮，再次点击，值不变2. ...
复制链接

扫一扫