综合挑战题，可调大小面板实现（Resizeable Panel）教程-慕课网

index.html
<!DOCTYPE html>
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>慕课网-Resizable</title>
 
<style type="text/css">
    body{margin:0px;padding:50px;font-size:14px;color:#333}
 
	.panel{width:400px;height:240px;border:1px solid #ccc;position:relative;min-width:40px;min-height:24px;}
	.panel .title{background:#eee;text-align:center;line-height:30px;border:1px solid #fff;font-weight:bold}
 
	.ui-Resizable-r{position:absolute;right:0px;top:0px;width:10px;height:100%;cursor: e-resize;}
	.ui-Resizable-b{position:absolute;right:0px;bottom:0px;width:100%;height:10px;cursor: s-resize;}
	.ui-Resizable-rb{position:absolute;right:0px;bottom:0px;width:20px;height:20px;cursor: nw-resize;}
 
</style>
</head>
<body onselectstart="return false;">
 
<h1>慕课网案例特效：Resizable — 可调大小面板</h1>
 
<div class="panel" id="ui-Resizable" onselectstart="return false;" >
	<div class="title" >Resizable Panel</div>
 
</div>
 
<script type="text/javascript">
 
	//	ctrl ：控制元素，panel ：面板 ， type 类型
	var m_panel , m_ctrl , m_type ;
 
	//	move：		是否侦听鼠标移动， 
	//	m_start_x：	鼠标相对ctrl元素的left、right 
	//	m_to_x：	鼠标的新位置
	var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0  ;
 
	//	面板最小尺寸
	var m_min_w = 100,m_min_h = 40;
 
	//	在控制元素中按下
	function on_mousedown( e , panel ,ctrl , type ){
		var e = e || window.event;
 
		//	计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置
		m_start_x =  e.pageX - ctrl.offsetLeft;
		m_start_y =  e.pageY - ctrl.offsetTop;
 
		m_panel = panel;
		m_ctrl  = ctrl;
		m_type  = type;
 
		//	开始处理移动事件
		moving = setInterval(on_move,10);
 
	}
	//	页面鼠标移动侦听处理
	document.onmousemove = function( e ){
		var e = window.event || e;
		m_to_x = e.pageX;
		m_to_y = e.pageY;
	}
	//	鼠标移动处理
	function on_move(){
 
		if(moving){
 
			//	计算最小的 left 和 top （使panel的新大小不能小于自身的位置）
			var min_left = m_panel.offsetLeft
			var min_top  = m_panel.offsetTop 
 
			var to_x = Math.max(min_left+ m_min_w,m_to_x - m_start_x) ;
			var to_y = Math.max(min_top + m_min_h,m_to_y - m_start_y) ;
 
	    		//	元素的新位置 = 鼠标新位置 - 鼠标相对元素的位置
 
 
 
			switch(  m_type ){
				case 'r' :
					m_ctrl.style.left =  to_x + "px";
					m_panel.style.width=grid_w+'px';
				break;
				case 'b' :
					m_ctrl.style.top  = to_y+ "px";
					m_panel.style.height=grid_h+'px';
				break;
				case 'rb' :
					m_ctrl.style.left =to_x + "px";
					m_ctrl.style.top  =to_y+ "px";
 
					m_panel.style.width=grid_w+'px';
					m_panel.style.height=grid_h+'px';
				break;
			}
		}
 
	}
 
	//	鼠标弹起处理
	document.onkeyup = document.onmouseup = function(e){
		clearInterval(moving);
		var cls = document.getElementsByClassName('ui-Resizable-ctrl');
		for(var i=0;i<cls.length;i++){
			cls[i].style.left = '';
			cls[i].style.top = '';
		}
	}
 
	//	设置某个面板支持调整大小
	function Resizable( panelId ){
 
		var panel = document.getElementById(panelId);
		//	插入调整控制元素
		var r = document.createElement("div");
		var b = document.createElement("div");
		var rb = document.createElement("div");
 
		r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
		b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
		rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
 
		panel.appendChild(r);
		panel.appendChild(b);
		panel.appendChild(rb);
 
		//	为调整控制元素设置拖拽处理
		r.addEventListener('mousedown',function(e){
			on_mousedown(e,panel,r,'r');
		})
		b.addEventListener('mousedown',function(e){
			on_mousedown(e,panel,b,'b');
		})
		rb.addEventListener('mousedown',function(e){
			on_mousedown(e,panel,rb,'rb');
		})
	}
	Resizable('ui-Resizable');
 
 
 
</script>
</body>
</html>
综合挑战题

任务
