完美的javascript模态窗口拖动、拖放大小

最新推荐文章于 2020-10-05 11:09:07 发布

原创最新推荐文章于 2020-10-05 11:09:07 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用纯JavaScript实现的网页模态窗口拖拽功能，不仅支持窗口位置的拖动调整，还允许用户通过拖拽窗口的右下角来改变窗口的大小，提供了丰富的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>完美的javascript模态窗口拖动、拖放大小</title>
	<style>
	*{margin:0;padding:0;}
	#zhezhao{
	width:100%;
	height:100%;
	background:#f00;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:9999;
	position:absolute;
	top:0;
	left:0;
	display:none;
	}
	#div2{
	width:200px;
	height:200px;
	position:relative;
	background:#EEEEEE;
	border:1px solid #f00;
	}
	#div1{
	width:15px;
	height:15px;
	background:#99CC00;
	position:absolute;
	right:0px;
	bottom:0px;
	cursor:nw-resize;
	overflow:hidden;
	font-size:12px;
	text-align:center;
	line-height:15px;
	color:#FFFFFF;
	float:right;
	z-index:3;
	}
	#right{
	width:15px;
	height:100%;
	background:#f00;
	float:right;
	position:absolute;
	right:0;
	top:0;
	cursor:e-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
	}
	#bottom{
	width:100%;
	height:15px;
	background:#f00;
	position:absolute;
	left:0;
	bottom:0;
	cursor:n-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
	}
	#div2 p{
	padding:10px;
	line-height:24px;
	font-size:13px;
	text-indent:24px;
	color:#996600;
	}
	#div2 h2{
	width:100%;
	height:25px;
	line-height:25px;
	font-size:14px;
	background:#CC9900;
	color:#FFFFFF;
	text-indent:15px;
	cursor:move;
	overflow:hidden;
	}
	</style>
	<script type="text/javascript">
	window.onload=function()
	{
	var oDiv=document.getElementById("div1");
	var oDiv2=document.getElementById("div2");
	var zhezhao=document.getElementById("zhezhao");
	var h2=oDiv2.getElementsByTagName("h2")[0];
	var right=document.getElementById("right");
	var bottom=document.getElementById("bottom");
	var mouseStart={};
	var divStart={};
	var rightStart={};
	var bottomStart={};
	//往右拽
	right.onmousedown=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	rightStart.x=right.offsetLeft;
	if(right.setCapture)
	{
	right.onmousemove=doDrag1;
	right.onmouseup=stopDrag1;
	right.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag1,true);
	document.addEventListener("mouseup",stopDrag1,true);
	}
	};
	function doDrag1(ev)
	{
	var oEvent=ev\|\|event;
	var l=oEvent.clientX-mouseStart.x+rightStart.x;
	var w=l+oDiv.offsetWidth;
	if(w<oDiv.offsetWidth)
	{
	w=oDiv.offsetWidth;
	}
	else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
	{
	w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
	}
	oDiv2.style.width=w+"px";
	};
	function stopDrag1()
	{
	if(right.releaseCapture)
	{
	right.onmousemove=null;
	right.onmouseup=null;
	right.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag1,true);
	document.removeEventListener("mouseup",stopDrag1,true);
	}
	};
	//往下拽
	bottom.onmousedown=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	bottomStart.y=bottom.offsetTop;
	if(bottom.setCapture)
	{
	bottom.onmousemove=doDrag2;
	bottom.onmouseup=stopDrag2;
	bottom.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag2,true);
	document.addEventListener("mouseup",stopDrag2,true);
	}
	};
	function doDrag2(ev)
	{
	var oEvent=ev\|\|event;
	var t=oEvent.clientY-mouseStart.y+bottomStart.y;
	var h=t+oDiv.offsetHeight;
	if(h<oDiv.offsetHeight)
	{
	h=oDiv.offsetHeight;
	}
	else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
	{
	h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
	}
	oDiv2.style.height=h+"px";
	};
	function stopDrag2()
	{
	if(bottom.releaseCapture)
	{
	bottom.onmousemove=null;
	bottom.onmouseup=null;
	bottom.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag2,true);
	document.removeEventListener("mouseup",stopDrag2,true);
	}
	};
	//往左右同时拽
	oDiv.onmousedown=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	divStart.x=oDiv.offsetLeft;
	divStart.y=oDiv.offsetTop;
	if(oDiv.setCapture)
	{
	oDiv.onmousemove=doDrag;
	oDiv.onmouseup=stopDrag;
	oDiv.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag,true);
	document.addEventListener("mouseup",stopDrag,true);
	}
	zhezhao.style.display='block';
	};
	function doDrag(ev)
	{
	var oEvent=ev\|\|event;
	var l=oEvent.clientX-mouseStart.x+divStart.x;
	var t=oEvent.clientY-mouseStart.y+divStart.y;
	var w=l+oDiv.offsetWidth;
	var h=t+oDiv.offsetHeight;
	if(w<oDiv.offsetWidth)
	{
	w=oDiv.offsetWidth;
	}
	else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
	{
	w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
	}
	if(h<oDiv.offsetHeight)
	{
	h=oDiv.offsetHeight;
	}
	else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
	{
	h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
	}
	oDiv2.style.width=w+"px";
	oDiv2.style.height=h+"px";
	};
	function stopDrag()
	{
	if(oDiv.releaseCapture)
	{
	oDiv.onmousemove=null;
	oDiv.onmouseup=null;
	oDiv.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag,true);
	document.removeEventListener("mouseup",stopDrag,true);
	}
	zhezhao.style.display='none';
	};
	//h2完美拖拽
	h2.onmousedown=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	divStart.x=oDiv2.offsetLeft;
	divStart.y=oDiv2.offsetTop;
	if(h2.setCapture)
	{
	h2.onmousemove=doDrag3;
	h2.onmouseup=stopDrag3;
	h2.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag3,true);
	document.addEventListener("mouseup",stopDrag3,true);
	}
	zhezhao.style.display='block';
	};
	function doDrag3(ev)
	{
	var oEvent=ev\|\|event;
	var l=oEvent.clientX-mouseStart.x+divStart.x;
	var t=oEvent.clientY-mouseStart.y+divStart.y;
	if(l<0)
	{
	l=0;
	}
	else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
	{
	l=document.documentElement.clientWidth-oDiv2.offsetWidth;
	}
	if(t<0)
	{
	t=0;
	}
	else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
	{
	t=document.documentElement.clientHeight-oDiv2.offsetHeight;
	}
	oDiv2.style.left=l+"px";
	oDiv2.style.top=t+"px";
	};
	function stopDrag3()
	{
	if(h2.releaseCapture)
	{
	h2.onmousemove=null;
	h2.onmouseup=null;
	h2.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag3,true);
	document.removeEventListener("mouseup",stopDrag3,true);
	}
	zhezhao.style.display='none';
	}
	};
	</script>
	</head>
	<body>
	<div id="div2">
	<div style="width:100%; height:100%; overflow:hidden;">
	<h2>完美的拖拽</h2>
	<p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'</p>
	<p>烈火学院 Liehuo.Net</p>
	<div id="right"></div>
	<div id="div1">拖</div>
	<div id="bottom"></div>
	</div>
	</div>
	<div id="zhezhao"></div>
	</body>
	</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>