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

编程练习

小伙伴们，根据所学知识，实现为Panel附加的3个控制元素添加拖拽支持

任务

一、根据全局变量的m_type[ r,b,rb]　类型来决定哪个控制元素移动

 

  提示:
  右下角的控制元素不仅要更新left还要更新top．
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <title>慕课网-Resizable</title>
  8.  
  9. <style type="text/css">
  10.  
  11. 	body{
  12. 		margin: 0px;padding: 50px;font-size: 14px;color: #333;
  13. 	}
  14.  
  15. 	.panel{
  16. 		width: 400px;height: 240px;
  17. 		border:1px solid #ccc;position: relative;
  18. 	}
  19.  
  20. 	.panel .title{
  21. 		background-color: #eee;text-align: center;line-height: 30px;
  22. 		border: 1px solid #fff;
  23. 		font-weight: bold;
  24. 	}
  25.  
  26. 	.ui-Resizable-r{
  27. 		/* 右侧控制元素样式　*/
  28. 		position: absolute;right: 0px;top: 0px;
  29. 		width: 10px;height: 100%;
  30. 		background-color: green;
  31. 		cursor: e-resize;
  32. 	}
  33. 	.ui-Resizable-b{
  34. 		/* 底边控制元素样式　*/
  35. 		position: absolute;right: 0px;bottom: 0px;
  36. 		width: 100%;height:10px ;
  37. 		background-color: blue;
  38. 		cursor: s-resize;
  39. 	}
  40. 	.ui-Resizable-rb{
  41. 		/* 右下角控制元素样式　*/
  42. 		position: absolute;right: 0px;bottom: 0px;
  43. 		width: 20px;height:20px ;
  44. 		background-color: red;
  45. 		cursor: nw-resize;
  46. 	}
  47. </style>
  48.  
  49. </head>
  50. <body>
  51.  
  52. 	<div class="panel" id="ui-Resizable">
  53. 		<div class="title">Resizable Panel</div>
  54. 	</div>
  55. 	<script type="text/javascript">
  56.  
  57.  
  58. 	//	ctrl ：控制元素，panel ：面板 ， type 类型
  59. 	var m_panel , m_ctrl , m_type ;
  60.  
  61. 	//	move：		是否侦听鼠标移动， 
  62. 	//	m_start_x：	鼠标相对ctrl元素的left、right 
  63. 	//	m_to_x：	鼠标的新位置
  64. 	var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0  ;
  65.  
  66. 	//	面板最小尺寸
  67. 	var m_min_w = 100,m_min_h = 40;
  68.  
  69. 	//	在控制元素中按下
  70. 	function on_mousedown( e , panel ,ctrl , type ){
  71. 		var e = e || window.event;
  72.  
  73. 		//	计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置
  74. 		m_start_x =  e.pageX - ctrl.offsetLeft;
  75. 		m_start_y =  e.pageY - ctrl.offsetTop;
  76.  
  77. 		m_panel = panel;
  78. 		m_ctrl  = ctrl;
  79. 		m_type  = type;
  80.  
  81. 		//	开始处理移动事件
  82. 		moving = setInterval(on_move,10);
  83.  
  84. 	}
  85. 	//	页面鼠标移动侦听处理
  86. 	document.onmousemove = function( e ){
  87. 		var e = window.event || e;
  88. 		m_to_x = e.pageX;
  89. 		m_to_y = e.pageY;
  90. 	}
  91. 	//	鼠标移动处理
  92. 	function on_move(){
  93.  
  94. 		if(moving){
  95. 			var to_x = m_to_x - m_start_x;
  96. 			var to_y = m_to_y - m_start_y;
  97. 			/* 根据全局变量的m_type[ r,b,rb]　类型来决定哪个控制元素移动 */
  98.  
  99. 		}
  100.  
  101. 	}
  102.  
  103. 	//	鼠标弹起处理
  104. 	document.onkeyup = document.onmouseup = function(e){
  105. 		clearInterval(moving);
  106. 	}
  107.  
  108. 	function Resizable( panelId ){
  109.  
  110. 		var panel = document.getElementById(panelId);
  111. 		//	插入调整控制元素
  112. 		var r = document.createElement("div");
  113. 		var b = document.createElement("div");
  114. 		var rb = document.createElement("div");
  115.  
  116. 		r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
  117. 		b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
  118. 		rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
  119.  
  120. 		panel.appendChild(r);
  121. 		panel.appendChild(b);
  122. 		panel.appendChild(rb);
  123.  
  124. 		//	为调整控制元素设置拖拽处理
  125. 		r.addEventListener('mousedown',function(e){
  126. 			on_mousedown(e,panel,r,'r');
  127. 		})
  128. 		b.addEventListener('mousedown',function(e){
  129. 			on_mousedown(e,panel,b,'b');
  130. 		})
  131. 		rb.addEventListener('mousedown',function(e){
  132. 			on_mousedown(e,panel,rb,'rb');
  133. 		})
  134. 	}
  135. 	Resizable('ui-Resizable');
  136.  
  137. 	</script>
  138. </script>
  139. </body>
  140. </html>
下一节