求通过鼠标拖动改变div的大小的代码～
我也不知道自己有多少分，这个帖子不敢给分了
^_^
希望大家帮帮忙
提供参考！
想问下
如果不设置offsetParent的情况下是否能使用offsetLeft
offsetLeft， scrollLeft， event.clientX， div.style.left分别是哪里到哪里的距离
有区别嘛？
我也不知道自己有多少分，这个帖子不敢给分了
^_^
希望大家帮帮忙
提供参考！
想问下
如果不设置offsetParent的情况下是否能使用offsetLeft
offsetLeft， scrollLeft， event.clientX， div.style.left分别是哪里到哪里的距离
有区别嘛？
我也自己顶一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.win{background: #F3F3F3; border:#0066FF 1px solid; overflow:hidden; position:absolute; cursor:default; display:none; }
#win0{left:100px; top:50px;}
#win1{left:100px; top:200px}
.win_title{color:#FFFFFF; background-color:#0066FF; height:20px}
.win_title_left{float:left; width:200px}
.win_title_right{width:30px; float:right}
.win_txt{height:100%; padding:3px}</style>
<script type="text/javascript">
var z=1;
function win_doInit(x){
var room = document.getElementById("win"+x);
room.x0=0;room.y0=0;
room.x1=0;room.y1=0;
room.w0=0;room.h0=0;
room.state="normal";
room.moveable=false;
room.resizable=false;
room.MoveTo=_win_doMoveTo;
room.ResizeTo=_win_doResizeTo;
room.onmousedown=_win_doMdown;
room.onmouseup=_win_doMup;
room.onmousemove=_win_doMmove;
room.style.display="block";
var w=200;
var h=200;
var l=200;
var t=100;
room.style.display="block";
room.MoveTo(l,t);
room.ResizeTo(w,h);
room.style.zIndex=z;
z++;
}
function _win_doMdown(evt){
var e=evt?evt:window.event;
if(this.style.cursor!="default"&&this.state=="normal"){
document.captureEvents?document.captureEvents("mousemove",this):this.setCapture();
this.x0=e.clientX;
this.y0=e.clientY;
this.x1=parseInt(this.offsetLeft）；
this.y1=parseInt(this.offsetTop);
this.w0=parseInt(this.offsetWidth);
this.h0=parseInt(this.offsetHeight);
this.resizable = true;
}
}
function _win_doMup(evt){
var e=evt?evt:window.event;
if(this.resizable){
document.releaseEvents?document.releaseEvents("mousemove",this):this.releaseCapture();
this.resizable = false;
}
}
function _win_doMmove(evt){
var e=evt?evt:window.event;
if(this.resizable){
var xxx=this.style.cursor.substring(0,2).match(/[we]/);
var yyy=this.style.cursor.substring(0,2).match(/[ns]/);
l=this.offsetLeft;
t=this.offsetTop;
w=parseInt(this.style.width);
h=parseInt(this.style.height);
if(xxx=="w"){
l=this.x1+e.clientX - this.x0;
w=this.w0+this.x0-e.clientX;
if(l<0){w+=l;l=0;}
if(w<100){l=l+w-100;w=100;}
}
if(xxx=="e"){
w=this.w0+e.clientX-this.x0;
w=w<100?100:w;
}
if(yyy=="n"){
t=this.y1+e.clientY - this.y0;
h=this.h0+this.y0-e.clientY;
if(t<0){h+=t;t=0;}
if(h<20){t=t+h-20;h=20;}
}
if(yyy=="s"){
h=this.h0+e.clientY-this.y0;
h=h<20?20:h;
}
this.MoveTo(l,t);
this.ResizeTo(w,h);
return(true);
}
if(this.state=="normal"){
var cc="";
x=window.getRealLeft(this);
y=window.getRealTop(this);
w=parseInt(this.offsetWidth);
h=parseInt(this.offsetHeight);
if(e.clientY-y<10)cc+="n";
if(y+h-e.clientY<10)cc+="s";
if(e.clientX-x<10)cc+="w";
if(x+w-e.clientX<10)cc+="e";
if(cc!=""){
this.style.cursor=cc+"-resize";
return(true);
}
if(this.style.cursor!="default"){
this.style.cursor="default";
}
}
}
function _win_doMoveTo(x,y){
x=isNaN(x)?0:parseInt(x);
y=isNaN(y)?0:parseInt(y);
x=x<0?0:x;
y=y<0?0:y;
this.style.left=x+"px";
this.style.top=y+"px";
}
function _win_doResizeTo(w,h){
w=isNaN(w)?100:parseInt(w);
h=isNaN(h)?20:parseInt(h);
w=w<100?100:w;
h=h<20?20:h;
this.style.width=w+"px";
this.style.height=h+"px";
}
function getRealLeft(o){
var l=o.offsetLeft-o.scrollLeft;
while(o=o.offsetParent){
l+=o.offsetLeft-o.scrollLeft;
}
return(l);
}
function getRealTop(o){
var t=o.offsetTop-o.scrollTop;
while(o=o.offsetParent){
t+=o.offsetTop-o.scrollTop;
}
return(t);
}
</script>
</head><body><a href="javascript:win_doInit(1)">dfsdafdsa</a>gfdgfdgfdgdgf/<a href="javascript:win_doInit(0)">sdfsdfsa</a>
<div class="win" id="win0">
窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处窗口内容显示处</div>
<div class="win" id="win1">
<div class="win_title">
<div class="win_title_left">这个是第二个窗口的标题显示</div>
<div class="win_title_right">-=x</div>
</div>
<div class="win_txt">第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口第二个窗口</div>
</div></body>
</html>