完美的JavaScript网页拖动

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>Js层拖动 - www.shouce.ren</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>
	<div id="right"></div>
	<div id="div1">拖</div>
	<div id="bottom"></div>
	</div>
</div>
<div id="zhezhao"></div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

完美的JavaScript网页拖动

分类

网站常用

描述

体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩校想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。