js 矩形div鼠标拉扯&拖拽

猫爪子挠

于 2019-07-22 13:07:07 发布

阅读量320

点赞数

分类专栏： Javascript 文章标签： js div拖拽 div拉扯

本文链接：https://blog.csdn.net/qq_24537165/article/details/96848000

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现效果图：

鼠标拖拽：鼠标拉扯：

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
		#box{
			width: 150px;
			height: 150px;
			background: green;
			position: absolute;
			left: 200px;
			top: 100px;
		}
        </style>
    </head>

    <body>
        <div id="box"></div>
        <script>

		var x = 0;
		var y = 0;
		var l = 0;
		var t = 0;
		var isDown = false;		
		var Box=document.getElementById("box");		 
		 
		Box.onmousedown=function(ev){
			var ev=ev||event;
			 
			//记录鼠标的坐标
			var x=ev.clientX;
			var y=ev.clientY;
			var b="";
			 
			//记录box原先的宽高和定位值
			var W=Box.offsetWidth;
			var L=Box.offsetLeft;
			var H=Box.offsetHeight;
			var T=Box.offsetTop;
			
			 
			if(x>Box.offsetLeft+Box.clientWidth-20){
				//当鼠标落下的地方在box的右边的时候，改变b的值
				b='right';
				Box.style.cursor = 'e-resize';
			}else if(x<Box.offsetLeft+20){
				//当鼠标落下的地方在box的左边的时候，改变b的值
				b='left';
				Box.style.cursor = 'e-resize';
			}else if(y>Box.offsetTop+Box.clientHeight-20){
				//当鼠标落下的地方在box的下边的时候，改变b的值
				b='bottom';
				Box.style.cursor = 's-resize';
			}else if(y<Box.offsetTop+20){
				//当鼠标落下的地方在box的上边的时候，改变b的值
				b='top';
				Box.style.cursor = 's-resize';
			}
			 else 
			 {
				//获取x坐标和y坐标
				x = ev.clientX;
				y = ev.clientY;

				//获取左部和顶部的偏移量
				l = Box.offsetLeft;
				t = Box.offsetTop;
				//开关打开
				isDown = true;
				//设置样式  
				Box.style.cursor = 'move';
			 }
				 
			document.onmousemove=function(ev){
				var ev=ev||event;
				 
				//记录鼠标坐标
				var disX=ev.clientX;
				var disY=ev.clientY;
				 
				 
				//根据b的值来执行不同的动作
				//当box缩放到一定程度停止缩放
				//box的宽/高度值等于原来的宽/高度加上原先鼠标的坐标值与新的鼠标坐标值之差
				//box的定位值等于原来的定位值加上原先鼠标的坐标值与新的鼠标坐标值之差
				switch (b){
					case 'right':
						Box.style.width=W+disX-x+"px";
						if(Box.clientWidth<=50){
							Box.style.width=50+'px';
						}
						break;
					case 'left':
						Box.style.width=W-disX+x+"px";
						Box.style.left=L+disX-x+"px";
						if(Box.clientWidth<=50){
							Box.style.width=50+'px';
							Box.style.left=L+W-50+'px';
						}
						break;
					case 'bottom':
						Box.style.height=H+disY-y+"px";
						if(Box.clientHeight<=50){
							Box.style.height=50+'px';
						}
						break;
					case 'top':
						Box.style.height=H-disY+y+"px";
						Box.style.top=T+disY-y+"px";
						if(Box.clientHeight<=50){
							Box.style.height=50+'px';
							Box.style.top=T+H-50+'px';
						}
						break;
				}
				
				if (isDown == false) {
					return;
				}
				//获取x和y
				var nx = ev.clientX;
				var ny = ev.clientY;
				//计算移动后的左偏移量和顶部的偏移量
				var nl = nx - (x - l);
				var nt = ny - (y - t);

				Box.style.left = nl + 'px';
				Box.style.top = nt + 'px';
			}
			 
			document.onmouseup=function(){
				document.onmousemove=null;
				
				//开关关闭
				isDown = false;
				Box.style.cursor = 'default';
			}
			return false;
		}
        </script>
    </body>

</html>