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

编程练习

小伙伴们，根据所学知识，实现为Panel限定控制元素的拖拽范围。

效果如图：

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

任务

一、重新计算to_x,to_y设定最小范围限定

 

  提示:
  全局变量中已经设定好了最小宽度和最小高度m_min_w和m_min_h．只要使用数学对象的max函数返回最小值和现值哪个更大就可以
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.  
  96. 		 	/* 重新计算to_x,to_y设定最小范围限定 */
  97.  
  98.  
  99. 		}
  100.  
  101. 	}
  102.  
  103. 	//	鼠标弹起处理
  104. 	document.onkeyup = document.onmouseup = function(e){
  105. 		clearInterval(moving);
  106. 		var cls = document.getElementsByClassName('ui-Resizable-ctrl');
  107. 		for(var i=0;i<cls.length;i++){
  108. 			cls[i].style.left = '';
  109. 			cls[i].style.top = '';
  110. 		}
  111. 	}
  112.  
  113. 	function Resizable( panelId ){
  114.  
  115. 		var panel = document.getElementById(panelId);
  116. 		//	插入调整控制元素
  117. 		var r = document.createElement("div");
  118. 		var b = document.createElement("div");
  119. 		var rb = document.createElement("div");
  120.  
  121. 		r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
  122. 		b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
  123. 		rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
  124.  
  125. 		panel.appendChild(r);
  126. 		panel.appendChild(b);
  127. 		panel.appendChild(rb);
  128.  
  129. 		//	为调整控制元素设置拖拽处理
  130. 		r.addEventListener('mousedown',function(e){
  131. 			on_mousedown(e,panel,r,'r');
  132. 		})
  133. 		b.addEventListener('mousedown',function(e){
  134. 			on_mousedown(e,panel,b,'b');
  135. 		})
  136. 		rb.addEventListener('mousedown',function(e){
  137. 			on_mousedown(e,panel,rb,'rb');
  138. 		})
  139. 	}
  140. 	Resizable('ui-Resizable');
  141.  
  142. 	</script>
  143. </script>
  144. </body>
  145. </html>
下一节