鼠标拖动div宽/高值增加与减小

HTML

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

CSS

#box{
	 150px;
	height: 150px;
	background: red;
	position: absolute;
	left: 200px;
	top: 100px;
}

JS

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-10){
		//当鼠标落下的地方在box的右边的时候，改变b的值
		b='right';
	}else if(x<Box.offsetLeft+10){
		//当鼠标落下的地方在box的左边的时候，改变b的值
		b='left';
	}else if(y>Box.offsetTop+Box.clientHeight-10){
		//当鼠标落下的地方在box的下边的时候，改变b的值
		b='bottom';
	}else if(y<Box.offsetTop+10){
		//当鼠标落下的地方在box的上边的时候，改变b的值
		b='top';
	}
	
	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;
		}
	}
	
	document.onmouseup=function(){
		document.onmousemove=null;
	}
	return false;
}