<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.panel {
width: 400px;
height: 200px;
background-color: azure;
position: absolute;
left: 100px;
top: 100px;
}
.title {
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
color: white;
font-size: small;
background-color: darkgrey;
cursor: pointer;
}
.dr {
position: absolute;
width: 30px;
height: 100%;
right: -15px;
top: 0;
/*background-color: red;*/
cursor: e-resize;
}
.db {
position: absolute;
height: 30px;
width: 100%;
bottom: -15px;
/* background-color: blue;*/
cursor: n-resize;
}
</style>
</head>
<body>
<div class="panel">
<div class="title">可扩展panel</div>
</div>
<div class="panel">
<div class="title">可扩展panel</div>
</div>
</body>
</html>
<script>
function drag(obj, opanel) {
var disx = 0;
var disy = 0;
resizable(opanel);
obj.onmousedown = function(e) {
var e = e || event;
disx = e.clientX - opanel.offsetLeft;
disy = e.clientY - opanel.offsetTop;
document.onmousemove = function(e) {
var e = e || event;
opanel.style.left = (e.clientX - disx) + "px";
opanel.style.top = (e.clientY - disy) + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
function resizable(objpanel) {
var db = document.createElement("div");
db.className = "db";
var dr = document.createElement("div");
dr.className = "dr";
var drb = document.createElement("div");
drb.className = "drb";
objpanel.appendChild(db);
objpanel.appendChild(dr);
objpanel.appendChild(drb);
resize(db, objpanel, "db");
resize(dr, objpanel, "dr");
resize(drb, objpanel, "drb");
}
function resize(objdiv, objpanel, type) {
var disx = 0;
var disy = 0;
objdiv.onmousedown = function(e) {
var e = e || event;
disx = e.clientX - objdiv.offsetLeft;
disy = e.clientY - objdiv.offsetTop;
document.onmousemove = function(e) {
var e = e || event;
objdiv.style.left = e.clientX - disx;
objdiv.style.top = e.clientY - disy;
switch (type) {
case "drb":
objpanel.style.width = e.clientX - disx+15 + "px";
objpanel.style.height = e.clientY - disy+15 + "px";
break;
case "dr":
objpanel.style.width = e.clientX - disx +15+ "px";
break;
case "db":
document.title = e.clientY - disy;
objpanel.style.height = e.clientY - disy +15+ "px";
break;
}
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
window.onload = function() {
drag(document.getElementsByClassName("title")[0], document.getElementsByClassName("panel")[0]);
drag(document.getElementsByClassName("title")[1], document.getElementsByClassName("panel")[1]);
}
</script>
