JS Resizable Panel 练习

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>
View Code

 

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 }
View Code

 

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 }
View Code

 

最后一步复原控制元素的位置，逻辑未明。。。

 

posted @ 2016-08-12 23:50  Aaron_Xiao  阅读(737)  评论(0)  编辑  收藏  举报