Resizable Panel
HTML
1 <!doctype html> 2 <html> 3 <head> 4 <title>Resizable Panel</title> 5 <meta charset="utf-8"> 6 <link type="text/css" rel="stylesheet" href="css/style.css"> 7 </head> 8 <body> 9 <div id="ui-resizable" class="ui-resizable"> 10 <div id="title" class="title">resizable面板</div> 11 </div> 12 <script type="text/javascript" src="js/script.js"></script> 13 </body> 14 </html>
CSS
1 .ui-resizable { 2 width:400px; 3 height:240px; 4 margin:50px; 5 position:relative; 6 border:1px solid black; 7 } 8 9 .title { 10 height:50px; 11 line-height:50px; 12 text-align:center; 13 font-size:24px; 14 font-weight:bold; 15 background-color:#ccc; 16 } 17 18 .resizable-r { 19 width:10px; 20 height:100%; 21 background-color:green; 22 position:absolute;; 23 right:0; 24 top:0; 25 cursor:e-resize; 26 } 27 28 .resizable-b { 29 width:100%; 30 height:10px; 31 background-color:blue; 32 position:absolute; 33 bottom:0; 34 right:0; 35 cursor:s-resize;; 36 } 37 38 .resizable-rb { 39 width:10px; 40 height:10px; 41 background-color:red; 42 position:absolute; 43 right:0; 44 bottom:0; 45 cursor:nw-resize; 46 }
JavaScript
思路总结：
（1）为面板附加三个控制元素；
（2）让控制元素支持拖动；
（3）动态调整面板的大小。
1 window.onload = function() { 2 //添加控制元素 3 resizable("ui-resizable"); 4 } 5 6 function resizable(panel_id) { 7 //创建元素并添加属性 8 var panel = document.getElementById(panel_id); 9 var right = document.createElement("div"); 10 var bottom = document.createElement("div"); 11 var right_bottom = document.createElement("div"); 12 right.className = "resizable-r resizable-control"; 13 bottom.className = "resizable-b resizable-control"; 14 right_bottom.className = "resizable-rb resizable-control"; 15 //将元素添加到文档中 16 panel.appendChild(right); 17 panel.appendChild(bottom); 18 panel.appendChild(right_bottom); 19 document.body.appendChild(panel); 20 //为每一个元素添加事件，并传入相应的参数 21 right.onmousedown = function(event) { 22 fnDown(event, panel, right, "right"); 23 } 24 bottom.onmousedown = function(event) { 25 fnDown(event, panel, bottom, "bottom"); 26 } 27 right_bottom.onmousedown = function(event) { 28 fnDown(event, panel, right_bottom, "right_bottom"); 29 } 30 }; 31 32 function fnDown(event, panel, control, type) { 33 event = event || window.event; 34 //按下鼠标时，鼠标距离控制元素左上角的距离 35 //由于控制元素是绝对定位的，而且有一个已经定位的父元素，所以控制元素的offsetLeft值与offsetTop值需要额外处理 36 //控制元素right其offsetTop值为0.其真正距离页面上端的距离应该为它自己的offsetTop加上其父元素的offsetTop； 37 //其offsetLeft为390，其真正距离页面左边的距离应该加上其父元素的offsetLeft 38 var m_start_x = event.clientX - (control.offsetLeft + panel.offsetLeft); 39 var m_start_y = event.clientY - (control.offsetTop + panel.offsetTop); 40 41 42 43 document.onmousemove = function(event) { 44 event = event || window.event; 45 //计算控制元素移动的动态距离 46 var l = event.clientX - panel.offsetLeft - m_start_x; 47 var t = event.clientY - panel.offsetTop - m_start_y; 48 //控制其移动最小距离 49 if(l < 200) { 50 l =200; 51 } 52 if(t < 50) { 53 t = 50; 54 } 55 //对不同类型的控制元素分别进行处理 56 switch(type) { 57 case "right": 58 //让控制元素跟随鼠标移动 59 //一定要记得加单位！！！ 60 control.style.left = l + "px"; 61 //调整面板 62 panel.style.width = l + 10 + "px"; 63 break; 64 case "bottom": 65 control.style.top = t + "px"; 66 panel.style.height = t + 10 + "px"; 67 break; 68 case "right_bottom": 69 control.style.left = l + "px"; 70 control.style.top = t + "px"; 71 panel.style.width = l + 10 + "px"; 72 panel.style.height = t + 10 + "px"; 73 } 74 } 75 76 document.onmouseup = function() { 77 //取消鼠标跟随 78 document.onmousemove = null; 79 document.onmouseup = null; 80 //将控制元素的位置复原 81 var controls = document.getElementsByClassName("resizable-control"); 82 for(var i = 0, l = controls.length; i < l; i++) { 83 controls[i].style.left = ""; 84 controls[i].style.top = ""; 85 } 86 } 87 }
最后一步复原控制元素的位置，逻辑未明。。。