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

编程练习

小伙伴们，根据所学知识，实现为Panel右侧控制元素添加拖拽支持。效果如图：

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

任务

一、计算鼠标按在控制元素上的x轴偏移

 

  提示:
  计算方法是：鼠标在页面中当前的x轴位置，减去控制元素距离页面左边的距离

 

二、鼠标在页面上移动时，把鼠标的x轴位置更新到全局变量m_to_x

 

  提示:
  可以参照鼠标y轴位置更新到m_to_y

 

三、计算当鼠标移动中时，控制元素left的位置

 

  提示:
  计算方法是：鼠标当前x轴　减去　鼠标在控制元素上x轴的偏移

 

四、更新控制元素的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.  
  75. 		/* 任务一：计算鼠标按在控制元素上的x轴偏移*/
  76.  
  77.  
  78.  
  79. 		m_panel = panel;
  80. 		m_ctrl  = ctrl;
  81. 		m_type  = type;
  82.  
  83. 		//	开始处理移动事件
  84. 		moving = setInterval(on_move,10);
  85.  
  86. 	}
  87. 	//	页面鼠标移动侦听处理
  88. 	document.onmousemove = function( e ){
  89. 		var e = window.event || e;
  90. /*　任务二：鼠标在页面上移动时，把鼠标x轴的位置更新到全局变量m_to_x　*/
  91.  
  92. 		m_to_y = e.pageY;
  93. 	}
  94. 	//	鼠标移动处理
  95. 	function on_move(){
  96.  
  97. 		if(moving){
  98. 			/* 任务三：计算当鼠标移动中时，控制元素left的位置　*/
  99.  
  100. 			var to_y = m_to_y - m_start_y;
  101. 			/* 任务四：更新控制元素的lef t*/
  102.  
  103. 		}
  104.  
  105. 	}
  106.  
  107. 	//	鼠标弹起处理
  108. 	document.onkeyup = document.onmouseup = function(e){
  109. 		clearInterval(moving);
  110. 	}
  111.  
  112. 	function Resizable( panelId ){
  113.  
  114. 		var panel = document.getElementById(panelId);
  115. 		//	插入调整控制元素
  116. 		var r = document.createElement("div");
  117. 		var b = document.createElement("div");
  118. 		var rb = document.createElement("div");
  119.  
  120. 		r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
  121. 		b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
  122. 		rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
  123.  
  124. 		panel.appendChild(r);
  125. 		panel.appendChild(b);
  126. 		panel.appendChild(rb);
  127.  
  128. 		//	为调整控制元素设置拖拽处理
  129. 		r.addEventListener('mousedown',function(e){
  130. 			on_mousedown(e,panel,r,'r');
  131. 		})
  132. 		b.addEventListener('mousedown',function(e){
  133. 			on_mousedown(e,panel,b,'b');
  134. 		})
  135. 		rb.addEventListener('mousedown',function(e){
  136. 			on_mousedown(e,panel,rb,'rb');
  137. 		})
  138. 	}
  139. 	Resizable('ui-Resizable');
  140.  
  141. 	</script>
  142. </script>
  143. </body>
  144. </html>
下一节