拖拽改变层大小例如：浏览器的窗口大小改变

最新推荐文章于 2019-07-17 20:01:09 发布

原创最新推荐文章于 2019-07-17 20:01:09 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽改变层大小 #事件 #浏览器窗口大小改变

前端实例专栏收录该内容

2 篇文章

订阅专栏

这个示例展示了如何通过JavaScript实现拖拽功能来改变HTML元素（如div）的宽度和高度。当用户点击并拖动div的边缘时，根据鼠标移动的位置，元素的尺寸会相应调整。该代码涉及鼠标事件处理、元素定位和动态样式更新。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽改变层大小</title>
	<style type="text/css">
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			left:500px;
			top:200px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv  = document.getElementById("div1");
			var b = "";
			oDiv.onmousedown = function(ev){
				var ev = ev || event;
				var disW = this.offsetWidth;//oDiv的宽
				var disX = ev.clientX;//鼠标点击的位置距离浏览器可视区左边的距离
				var disL = this.offsetLeft;//oDiv的left值
				var disH = this.offsetHeight;//oDiv的高
				var disY = ev.clientY;//鼠标点击的位置距离浏览器可视区上边的距离
				var disT = this.offsetTop;//oDiv的top值
				if(disX>disL+disW-10){
				// 如果鼠标点击的位置距离浏览器可视区左边的距离大于（oDiv的left值+oDiv的宽-10）
				//在这里不用再判断小于（oDiv的left值+oDiv的宽）的情况，因为如果大于了，鼠标早已不在oDiv上了
				b = "right"}
				if(disX<disL+10){
				// 如果鼠标点击的位置距离浏览器可视区左边的距离小于（oDiv的left值+10）
				//在这里不用再判断大于（oDiv的left值）的情况，因为如果小于了，鼠标早已不在oDiv上了

				b = "left";}
				if(disY<disT +10){
								// 如果鼠标点击的位置距离浏览器可视区上边的距离小于（oDiv的top值+10）//在这里不用再判断大于（oDiv的top值）的情况，因为如果值小于了，鼠标早已不在oDiv上了
								b = "Top";}
				if(disY>disT +disH-10){
								// 如果鼠标点击的位置距离浏览器可视区上边的距离大于（oDiv的top值+oDiv的高-10）//在这里不用再判断小于（oDiv的top值+oDiv的高）的情况，因为如果值大于了，鼠标早已不在oDiv上了
								 b = "Bottom";}
				document.onmousemove = function(ev){
					var ev = ev || event;
					switch(b){
						case 'right':
						oDiv.style.width = disW+(ev.clientX-disX)+"px";
						//其中ev.clientX-disX的差值是移动的距离，或正或负值
 						break;
						case "left":
						oDiv.style.width = disW-(ev.clientX-disX)+"px";
						oDiv.style.left = disL+(ev.clientX-disX)+"px"; 
						break; 
						case 'Top':
						oDiv.style.height = disH-(ev.clientY-disY)+"px";
						oDiv.style.top = disT+(ev.clientY-disY)+"px"; 
						break;
						case 'Bottom':
						oDiv.style.height = disH+(ev.clientY-disY)+"px"; 
						break;
						}
					}
				document.onmouseup = function(){
                                  document.onmousemove = document.onmouseup = null;
                              }
                                   return false;
                            }
              }
</script>
</head>
<body>
<div id="div1"></div></body>
</html>