Resizable Panel
HTML
<!doctype html>
<html>
<head>
<title>Resizable Panel</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="ui-resizable" class="ui-resizable">
<div id="title" class="title">resizable面板</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
.ui-resizable {
width:400px;
height:240px;
margin:50px;
position:relative;
border:1px solid black;
}
.title {
height:50px;
line-height:50px;
text-align:center;
font-size:24px;
font-weight:bold;
background-color:#ccc;
}
.resizable-r {
width:10px;
height:100%;
background-color:green;
position:absolute;;
right:;
top:;
cursor:e-resize;
}
.resizable-b {
width:100%;
height:10px;
background-color:blue;
position:absolute;
bottom:;
right:;
cursor:s-resize;;
}
.resizable-rb {
width:10px;
height:10px;
background-color:red;
position:absolute;
right:;
bottom:;
cursor:nw-resize;
}
JavaScript
思路总结：
（1）为面板附加三个控制元素；
（2）让控制元素支持拖动；
（3）动态调整面板的大小。
window.onload = function() {
//添加控制元素
resizable("ui-resizable");
}
function resizable(panel_id) {
//创建元素并添加属性
var panel = document.getElementById(panel_id);
var right = document.createElement("div");
var bottom = document.createElement("div");
var right_bottom = document.createElement("div");
right.className = "resizable-r resizable-control";
bottom.className = "resizable-b resizable-control";
right_bottom.className = "resizable-rb resizable-control";
//将元素添加到文档中
panel.appendChild(right);
panel.appendChild(bottom);
panel.appendChild(right_bottom);
document.body.appendChild(panel);
//为每一个元素添加事件，并传入相应的参数
right.onmousedown = function(event) {
fnDown(event, panel, right, "right");
}
bottom.onmousedown = function(event) {
fnDown(event, panel, bottom, "bottom");
}
right_bottom.onmousedown = function(event) {
fnDown(event, panel, right_bottom, "right_bottom");
}
};
function fnDown(event, panel, control, type) {
event = event || window.event;
//按下鼠标时，鼠标距离控制元素左上角的距离
//由于控制元素是绝对定位的，而且有一个已经定位的父元素，所以控制元素的offsetLeft值与offsetTop值需要额外处理
//控制元素right其offsetTop值为0.其真正距离页面上端的距离应该为它自己的offsetTop加上其父元素的offsetTop；
//其offsetLeft为390，其真正距离页面左边的距离应该加上其父元素的offsetLeft
var m_start_x = event.clientX - (control.offsetLeft + panel.offsetLeft);
var m_start_y = event.clientY - (control.offsetTop + panel.offsetTop);
document.onmousemove = function(event) {
event = event || window.event;
//计算控制元素移动的动态距离
var l = event.clientX - panel.offsetLeft - m_start_x;
var t = event.clientY - panel.offsetTop - m_start_y;
//控制其移动最小距离
if(l < 200) {
l =200;
}
if(t < 50) {
t = 50;
}
//对不同类型的控制元素分别进行处理
switch(type) {
case "right":
//让控制元素跟随鼠标移动
//一定要记得加单位！！！
control.style.left = l + "px";
//调整面板
panel.style.width = l + 10 + "px";
break;
case "bottom":
control.style.top = t + "px";
panel.style.height = t + 10 + "px";
break;
case "right_bottom":
control.style.left = l + "px";
control.style.top = t + "px";
panel.style.width = l + 10 + "px";
panel.style.height = t + 10 + "px";
}
}
document.onmouseup = function() {
//取消鼠标跟随
document.onmousemove = null;
document.onmouseup = null;
//将控制元素的位置复原
var controls = document.getElementsByClassName("resizable-control");
for(var i = 0, l = controls.length; i < l; i++) {
controls[i].style.left = "";
controls[i].style.top = "";
}
}
}
最后一步复原控制元素的位置，逻辑未明。。。