标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px;
}
.panel {
width: 400px;
height: 200px;
background-color: azure;
position: absolute;
left: 100px;
top: 100px;
border-right: 1px solid chocolate;
border-bottom: 1px solid chocolate;
}
.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: 15px;
height: 100%;
right: 0;
top: 0;
/*background-color: red;*/
cursor: e-resize;
}
.db {
position: absolute;
height: 15px;
width: 100%;
bottom: 0;
/* background-color: blue;*/
cursor: n-resize;
}
</style>
</head>
<body>
<div class="panel">
<div class="title">可扩展panel</div>
<div class="dr"></div>
<div class="db"></div>
<div class="drb"></div>
</div>
</body>
</html>
<script>
window.onload = function() {
drag0(document.getElementsByClassName("title")[0], document.getElementsByClassName("panel")[0]);
drag(document.getElementsByClassName("dr")[0], document.getElementsByClassName("panel")[0]);
drag2(document.getElementsByClassName("db")[0], document.getElementsByClassName("panel")[0]);
};
function drag0(obj, opanel) {
var disx = 0;
var disy = 0;
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 drag(obj, opanel) {
var disx = 0;
var disy = 0;
obj.onmousedown = function(e) {
var e = e || event;
disx = e.clientX - obj.offsetLeft;
disy = e.clientX - obj.offsetTop;
document.onmousemove = function(e) {
var e = e || event;
document.title = (e.clientX - disx + 15) + "px";;
obj.style.left = (e.clientX - disx) + "px";
opanel.style.width = (e.clientX - disx + 15) + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
function drag2(obj, opanel) {
var disx = 0;
var disy = 0;
obj.onmousedown = function(e) {
var e = e || event;
disx = e.clientX - obj.offsetLeft;
disy = e.clientY - obj.offsetTop;
document.onmousemove = function(e) {
var e = e || event;
obj.style.top = (e.clientY - disy) + "px";
opanel.style.height = (e.clientY - disy + 15) + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
标签：
原文地址：http://www.cnblogs.com/fierceeagle/p/4530614.html
