JS(拖拽窗口)

最新推荐文章于 2024-07-17 16:10:02 发布

qq_1405449844

最新推荐文章于 2024-07-17 16:10:02 发布

阅读量316

点赞数

分类专栏：拖拽窗口文章标签： JS

本文链接：https://blog.csdn.net/qq_45621713/article/details/101701694

版权

拖拽窗口专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何利用JavaScript实现页面窗口的拖拽效果，详细阐述了相关代码和实现步骤。

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

实现页面窗口的拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#title{
			border: 3px solid gray;
			background: rgba(142,229,238,0.6);
				cursor: move;//让鼠标悬停时候光标变为可移动
		}
        #register{
        	margin-top: 200px;
        	margin-left:500px;
        	position: relative;
	width: 300px;
	height: 300px;
     background: #00FF7F;
        }
        #close{
            position: absolute;
            right: 0;
            cursor: pointer;//鼠标悬停时光标变为手指
        }
	</style>


</head>
<body>
	<div id="register">
		<div id="tuo">
			注册信息（可以拖拽）
			//鼠标长按可实现拖拽效果
			<span id="close">【关闭】</span>
			//点击可以关闭窗口
		</div>
	</div>
	<script type="text/javascript">
	//1.获取页面元素
		var register = document.getElementById('register');
		var close = document.getElementById('close');
		var title= document.getElementById('title');
		//2.鼠标长按框框顶部触发拖拽事件，这里应用了事件委托，点击框框时，计算鼠标的位置
		
      title.onmousedown = function (e) {
      //计算鼠标在框框（#title）的位置
      	e = e || window.event;
        var x = e.pageX - register.offsetLeft;
        var y = e.pageY - register.offsetTop;
        document.onmousemove = function(e){
        //重新定义大框(#register)在页面的位置
        	boxX = e.pageX - x;
        	boxY = e.pageY - y;
        	register.style.left = boxX -500  + "px";
        	register.style.top = boxY -200  + "px";
        }
      
        }
        //当松开鼠标时大框（#register）停止移动
 document.onmouseup = function(){
        	document.onmousemove = null;
        }
        //点击关闭按钮，让大框（#register）消失
      close.onclick = function(){
      	register.style.display = 'none';
      }
	</script>
</body>

</html>