JS项目之拖拽

最新推荐文章于 2024-05-17 04:51:24 发布

知途。

最新推荐文章于 2024-05-17 04:51:24 发布

阅读量120

点赞数

文章标签： js javascript html

本文链接：https://blog.csdn.net/weixin_44465745/article/details/107336176

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>拖拽</title>
	<style>
		#div1{
			width:200px; 
			height:200px; 
			background:red; 
			position:absolute;
		}

	</style>
	<script>
		window.onload=function(event)
		{
			var oDiv=document.getElementById('div1');
			
			var disX=0;
			var disY=0;
			oDiv.onmousedown=function(event)
			{
				disX=event.clientX-oDiv.offsetLeft;
				disY=event.clientY-oDiv.offsetTop;
				
				document.onmousemove=function(event)
				{
					var l=event.clientX-disX;
					var t=event.clientY-disY;
					
					if(l<0)
					{
						l=0;
					}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
					{
						l=document.documentElement.clientWidth-oDiv.offsetWidth;
					}
					
					if(t<0)
					{
						t=0;
					}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
					{
						t=document.documentElement.clientHeight-oDiv.offsetHeight;
					}
					
					oDiv.style.left=l+'px';
					oDiv.style.top=t+'px';
				}
				document.onmouseup=function()
				{
					document.onmousemove=null;
					document.onmouseup=null;
				}
			}
			
			
		};
	</script>
</head>

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

知途。

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS项目之拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽</title> <style> #div1{ width:200px; height:20
复制链接

扫一扫