javascript拖拽——磁性吸附

最新推荐文章于 2023-11-09 17:51:25 发布

luohui2017

最新推荐文章于 2023-11-09 17:51:25 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签：磁性吸附限制范围

本文链接：https://blog.csdn.net/luohui2017/article/details/79365782

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript实现的拖拽元素并限制其在页面内移动范围的方法。通过监听鼠标按下事件，计算元素与鼠标的相对位置，并在鼠标移动时更新元素的位置，同时加入了边界检测确保元素不会移出可视区域。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.οnlοad=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			
			if(l<50)
			{
				l=0;
			}
			else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50)
			{
				l=document.documentElement.clientWidth-oDiv.offsetWidth;
			}
			
			if(t<50)
			{
				t=0;
			}
			else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50)
			{
				t=document.documentElement.clientHeight-oDiv.offsetHeight;
			}
			
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
		};
		
		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
		};
	};
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

磁性吸附与限制范围的最大区别就是l与t的判断条件，当判定l<0时，让l等于0，此时为限制div不被拖出页面，当判定l<50时，让l等于0，此时为磁性吸附，让l强行贴壁。t同理。