-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSplitPanel.html
74 lines (69 loc) · 2.81 KB
/
SplitPanel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
<head>
<meta charset="utf8">
<style>
* { font-family: sans-serif; font-size: small; }
#main { position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; }
#head { position: absolute; left:0; width: 100px; top:0; height: 102px; }
#user { position: absolute; left:0; width: 102px; top:102px; bottom: 0; }
#time { position: absolute; left:102px; right: 0; top:0; height: 102px; }
#plan { position: absolute; left:102px; right: 0; top:102px; bottom: 0; }
#hsplit { width: 19px; position: absolute; left: 100px; top:0; bottom: 0; cursor: col-resize;
border-left: 2px solid grey
}
#vsplit { height: 19px; ; position: absolute; left: 0; right: 0; top:100px; cursor: row-resize;
border-top: 2px solid grey;
}
.split:hover { background: whitesmoke; }
</style>
</head>
<body>
<div id="main">
<div id="head">head</div>
<div id="user">user</div>
<div id="time">time</div>
<div id="plan">plan</div>
<div id="vsplit" class="split" onmousedown="vsplit(event)"></div>
<div id="hsplit" class="split" onmousedown="hsplit(event)"></div>
</div>
<!-- Adjust panel borders -->
<script>
hsplit=(event)=>{
hsplit.x = event.clientX - event.target.offsetLeft;
}
vsplit=(event)=>{
vsplit.y = event.clientY - event.target.offsetTop;
}
onmousemove=(event)=>{
if(hsplit.x){
//console.log(event.clientX);
var split = document.getElementById('hsplit');
var container = split.parentElement;
if(container.offsetLeft<event.clientX && event.clientX - container.offsetLeft + split.offsetWidth<container.offsetWidth){
document.getElementById('hsplit').style.left = event.clientX - container.offsetLeft;
document.getElementById('head').style.width = event.clientX - container.offsetLeft;
document.getElementById('user').style.width = event.clientX - container.offsetLeft;
document.getElementById('time').style.left = event.clientX - container.offsetLeft + 2;
document.getElementById('plan').style.left = event.clientX - container.offsetLeft + 2;
}
}
if(vsplit.y){
//console.log(event.clientY);
var split = document.getElementById('vsplit');
var container = split.parentElement;
if(container.offsetTop<event.clientY && event.clientY - container.offsetTop + split.offsetHeight<container.offsetHeight){
document.getElementById('vsplit').style.top = event.clientY - container.offsetTop;
document.getElementById('head').style.height = event.clientY - container.offsetTop;
document.getElementById('user').style.top = event.clientY - container.offsetTop + 2;
document.getElementById('time').style.height = event.clientY - container.offsetTop;
document.getElementById('plan').style.top = event.clientY - container.offsetTop + 2;
}
}
}
onmouseup=(event)=>{
hsplit.x = null;
vsplit.y = null;
}
</script>
</body>
</html>