<!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=gb2312" />
<title>拖动拉缩窗体</title>
</head>
<script type="text/javascript">
var obj_moing = false;
var obj_resize = false;
var obj_Ofx = 0;
var obj_Vfx = 0;
var obj_Ofy = 0;
var obj_Vfy = 0;
function obj_down(id){//窗口在获得鼠标按下时触发
if (obj_moing) { //如果正在拖动,那么返回
return;
}
else {
obj_Ofx = event.clientX; //获取鼠标在网页中的X坐标
obj_Vfx = document.getElementById(id).offsetLeft; //获取窗口的左位置
obj_Ofy = event.clientY; //获取鼠标在网页中的X坐标
obj_Vfy = document.getElementById(id).offsetTop; //获取窗口的左位置
document.getElementById(id).setCapture(); //锁住拖动的对象
obj_moing = true; //设置为正在拖动
}
}
function obj_up(id){//当鼠标弹起时触发
if (obj_moing) {
document.getElementById(id).releaseCapture();//释放锁住的对象
obj_moing = false; //设置为不是正在拖动
}
if (obj_resize) {
document.getElementById(id).style.cursor = "auto";//还原鼠标形状
document.getElementById(id).releaseCapture();//释放锁住的对象
obj_resize = false; //设置为不能缩放大小
}
}
function obj_move(id){//当鼠标移动时触发
if (obj_moing){
var curX = event.clientX;
var curY = event.clientY;
var obj_lastx = obj_Vfx+curX-obj_Ofx; //取得移动后的左位置
var obj_lasty = obj_Vfy+curY-obj_Ofy; //取得移动后的上位置
if(obj_lastx <= 0){
obj_lastx = 0;
}
if(obj_lasty <= 0){
obj_lasty = 0;
}
document.getElementById(id).style.left = obj_lastx; //设定移动后的位置
document.getElementById(id).style.top = obj_lasty; //设定移动后的位置
}
if(obj_resize){
if (event.clientX - parseInt(document.getElementById(id).offsetLeft) > 100 && event.clientY - parseInt(document.getElementById(id).offsetTop) > 100) {
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) - 25;
}
}
}
}
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 <= 7 && moveleft >= 0 && movetop <= 7 && movetop >= 0) { //鼠标出现在窗口右下角
document.getElementById(id).style.cursor="nw-resize";
document.getElementById(id).setCapture(); //锁住缩放的对象
obj_resize = true; //设置为正在缩放
}
}
/**
* @deprecated 关闭div 真正的从html中移除div代码，释放资源,兼容ie和火狐
*
*/
function closeDiv()
{
var divobj = document.getElementById("div1");
divobj.parentNode.removeChild(divobj);
}
</script>
<body bgcolor="#ffffff">
<div id="div1" style="width:300px;height:300px;top:200px;left:300px;zIndex:100;position:absolute;cursor:auto;" οnmοusedοwn="obj_lsdown('div1');" οnmοusemοve="obj_move('div1');" οnmοuseup="obj_up('div1');">
<table border="0" cellpadding="0" cellspacing="0" id="table1" width="100%" style="table-layout:fixed;">
<tr>
<td bgcolor="#C0CFB2" id="div1td1" style="cursor:move;height:25px;" οnmοusedοwn="obj_down('div1');" >
<span style='float:left'>拖动拉缩窗体</span> <span style='float:right'><a href='javascript:closeDiv()'>关闭</a></span>
</td>
</tr>
<tr>
<td style="height:275px;" id="div1td2" bgcolor="#6666ff">
<span> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</span>
</td>
</tr>
</table>
</div>
</body>
</html>
相关资源：Qt5实现无边框可移动可拉伸靠边自动分屏的自定义窗体
