<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#drap_div{
width: 200px;
height: 200px;
position: absolute;
right:10px;
bottom: 10px;
background: #eeeeee;
border: 2px #dddddd solid;
}
#drap_tool{
position: absolute;
top:0px;
left: 0px;
background: #cccccc;
width: 10px;
height: 10px;
cursor:nw-resize;
}
</style>
<script>
function init(){
var drop=false;
var drapToolObj=document.getElementById("drap_tool");
var drapDivObj=document.getElementById("drap_div");
var windowWidth=document.body.clientWidth;
var windowHeight=document.body.clientHeight;
var drapObjRight;
var drapObjBottom;
drapToolObj.onmousedown=function(){
drop=true;
drapObjRight=windowWidth-drapDivObj.offsetLeft- drapDivObj.offsetWidth;
drapObjBottom=windowHeight-drapDivObj.offsetTop- drapDivObj.offsetHeight;
};
drapToolObj.onmouseup=function(){
drop=false;
};
document.onmouseup=function(){
drop=false;
};
document.onmousemove=function(e){
var e=e?e:window.event; //IE下事件E不存在，为window.event事件
if(drop){
if(windowWidth-e.clientX-drapObjRight>10 && windowHeight-e.clientY-drapObjBottom>10){
drapDivObj.style.width= windowWidth-e.clientX-drapObjRight+"px";
drapDivObj.style.height= windowHeight-e.clientY-drapObjBottom+"px";
}
}
}
}
</script>
</head>
<body onload="init()">
<div id="drap_div">
<div id="drap_tool"></div>
</div>
</body>
</html>
?
