2-10 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现让面板跟随右下角控制元素的移动而更改大小。

效果如图：

温馨提示:
完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、让面板跟随右下角的控制元素更改大小

 

  提示:
  可以参考右侧，底边控制元素更改面板大小的方法，注意的是右下角的控制元素是20像素高宽的。

 

二、在鼠标弹起之后清除控制元素的left和top

 

  提示:
  控制元素的left或top是在拖动时增加上去的，清除后会用样式中默认的right:0px和bottom:0px，这样在使用第二个控制元素的时候，之前使用过的控制元素就不会受到其left或top的影响而不肯挪动位置了．对了，要清除手动添加上的left或top只要设置其为一个空字符串就可以。
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>慕课网-Resizable</title>
  6. <style type="text/css">
  7.  
  8. 	body{
  9. 		margin: 0px;padding: 50px;font-size: 14px;color: #333;
  10. 	}
  11.  
  12. 	.panel{
  13. 		width: 400px;height: 240px;
  14. 		border:1px solid #ccc;position: relative;
  15. 	}
  16.  
  17. 	.panel .title{
  18. 		background-color: #eee;text-align: center;line-height: 30px;
  19. 		border: 1px solid #fff;
  20. 		font-weight: bold;
  21. 	}
  22.  
  23. 	.ui-Resizable-r{
  24. 		/* 右侧控制元素样式　*/
  25. 		position: absolute;right: 0px;top: 0px;
  26. 		width: 10px;height: 100%;
  27. 		background-color: green;
  28. 		cursor: e-resize;
  29. 	}
  30. 	.ui-Resizable-b{
  31. 		/* 底边控制元素样式　*/
  32. 		position: absolute;right: 0px;bottom: 0px;
  33. 		width: 100%;height:10px ;
  34. 		background-color: blue;
  35. 		cursor: s-resize;
  36. 	}
  37. 	.ui-Resizable-rb{
  38. 		/* 右下角控制元素样式　*/
  39. 		position: absolute;right: 0px;bottom: 0px;
  40. 		width: 20px;height:20px ;
  41. 		background-color: red;
  42. 		cursor: nw-resize;
  43. 	}
  44. </style>
  45.  
  46. </head>
  47. <body>
  48. 	<div class="panel" id="ui-Resizable">
  49. 		<div class="title">Resizable Panel</div>
  50. 	</div>
  51. 	<script type="text/javascript">
  52.  
  53.  
  54. 	//	ctrl ：控制元素，panel ：面板 ， type 类型
  55. 	var m_panel , m_ctrl , m_type ;
  56.  
  57. 	//	move：		是否侦听鼠标移动， 
  58. 	//	m_start_x：	鼠标相对ctrl元素的left、right 
  59. 	//	m_to_x：	鼠标的新位置
  60. 	var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0  ;
  61.  
  62. 	//	面板最小尺寸
  63. 	var m_min_w = 100,m_min_h = 40;
  64.  
  65. 	//	在控制元素中按下
  66. 	function on_mousedown( e , panel ,ctrl , type ){
  67. 		var e = e || window.event;
  68.  
  69. 		//	计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置
  70. 		m_start_x =  e.pageX - ctrl.offsetLeft;
  71. 		m_start_y =  e.pageY - ctrl.offsetTop;
  72.  
  73. 		m_panel = panel;
  74. 		m_ctrl  = ctrl;
  75. 		m_type  = type;
  76.  
  77. 		//	开始处理移动事件
  78. 		moving = setInterval(on_move,10);
  79.  
  80. 	}
  81. 	//	页面鼠标移动侦听处理
  82. 	document.onmousemove = function( e ){
  83. 		var e = window.event || e;
  84. 		m_to_x = e.pageX;
  85. 		m_to_y = e.pageY;
  86. 	}
  87. 	//	鼠标移动处理
  88. 	function on_move(){
  89.  
  90. 		if(moving){
  91. 			var to_x = m_to_x - m_start_x;
  92. 			var to_y = m_to_y - m_start_y;
  93. 			switch(  m_type ){
  94. 				case 'r' :
  95. 					m_ctrl.style.left =  to_x + "px";
  96. 					m_panel.style.width=to_x+10+'px';
  97. 				break;
  98. 				case 'b' :
  99. 					m_ctrl.style.top  = to_y+ "px";
  100. 					m_panel.style.height=to_y+10+'px';
  101. 				break;
  102. 				case 'rb' :
  103. 					m_ctrl.style.left =to_x + "px";
  104. 					m_ctrl.style.top  =to_y+ "px";
  105.  
  106. 					/*　任务一：让面板跟随右下角的控制元素更改大小　*/
  107.  
  108. 				break;
  109. 			}
  110. 		}
  111.  
  112. 	}
  113.  
  114. 	//	鼠标弹起处理
  115. 	document.onkeyup = document.onmouseup = function(e){
  116. 		clearInterval(moving);
  117. 		var cls = document.getElementsByClassName('ui-Resizable-ctrl');
  118. 		for(var i=0;i<cls.length;i++){
  119. 			/*　任务二：在鼠标弹起之后清除控制元素的left和top　*/
  120.  
  121. 		}
  122. 	}
  123.  
  124. 	function Resizable( panelId ){
  125.  
  126. 		var panel = document.getElementById(panelId);
  127. 		//	插入调整控制元素
  128. 		var r = document.createElement("div");
  129. 		var b = document.createElement("div");
  130. 		var rb = document.createElement("div");
  131.  
  132. 		r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
  133. 		b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
  134. 		rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
  135.  
  136. 		panel.appendChild(r);
  137. 		panel.appendChild(b);
  138. 		panel.appendChild(rb);
  139.  
  140. 		//	为调整控制元素设置拖拽处理
  141. 		r.addEventListener('mousedown',function(e){
  142. 			on_mousedown(e,panel,r,'r');
  143. 		})
  144. 		b.addEventListener('mousedown',function(e){
  145. 			on_mousedown(e,panel,b,'b');
  146. 		})
  147. 		rb.addEventListener('mousedown',function(e){
  148. 			on_mousedown(e,panel,rb,'rb');
  149. 		})
  150. 	}
  151. 	Resizable('ui-Resizable');
  152.  
  153. 	</script>
  154.  
  155. </body>
  156. </html>
下一节