<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag to resize</title>
</head>
<script type="text/javascript">
var obj_resize = false;
var obj_Ofx = 0;
var obj_Vfx = 0;
var obj_Ofy = 0;
var obj_Vfy = 0;
function obj_up(id){
if (obj_resize) {
document.getElementById(id).style.cursor = "auto";
document.getElementById(id).releaseCapture();
obj_resize = false;
}
}
function obj_move(id){
if(obj_resize){
if (event.clientX - parseInt(document.getElementById(id).offsetLeft) > 70 && event.clientY - parseInt(document.getElementById(id).offsetTop) > 70) {
if (event.clientX - parseInt(document.getElementById(id).offsetLeft) < 1024 && event.clientY - parseInt(document.getElementById(id).offsetTop) < 768) {
document.getElementById(id).style.width = event.clientX - parseInt(document.getElementById(id).offsetLeft);
document.getElementById(id).style.height = event.clientY - parseInt(document.getElementById(id).offsetTop);
document.getElementById("div1td2").style.height = event.clientY - parseInt(document.getElementById(id).offsetTop);
}
}
}
}
function obj_lsdown(id){
var curX = event.clientX + document.documentElement.scrollLeft;
var curY = event.clientY + document.documentElement.scrollTop;
var moveallwidth = parseInt(document.getElementById(id).offsetLeft) + parseInt(document.getElementById(id).offsetWidth);
var moveallheight = parseInt(document.getElementById(id).offsetTop) + parseInt(document.getElementById(id).offsetHeight);
var moveleft = parseInt(moveallwidth) - parseInt(curX);
var movetop = parseInt(moveallheight) - parseInt(curY);
if (moveleft <= 70 && moveleft >= 0 && movetop <= 70 && movetop >= 0) {
document.getElementById(id).style.cursor="nw-resize";
document.getElementById(id).setCapture();
obj_resize = true;
}
}
</script>
<body bgcolor="#ffffff">
<div id="div1"
style="width: 300px; height: 300px; top: 200px; left: 300px; zIndex: 100; position: absolute; cursor: auto;"
onmousedown="obj_lsdown('div1');" onmousemove="obj_move('div1');"
onmouseup="obj_up('div1');">
<table border="0" cellpadding="0" cellspacing="0" id="table1"
width="100%" style="table-layout: fixed;">
<tr>
<td style="height: 300px;" id="div1td2" bgcolor="#6666ff"><span>content</span>
</td>
</tr>
</table>
</div>
</body>
</html>
posted on 2011-06-08 16:41
ApolloDeng 閱讀(717)
評論(1) 編輯 收藏