<!doctype html public -//w3c//dtd html 4.01 transitional//en
>
<html>
<head>
<meta http-equiv=content-type content=text/html; charset=gb2312>
<title>drag layer</title>
<style>
body,table{color:#000000;
font-size:12px;
}
div.div_one{}
.dragbar{color:#ffffff;
font-weight:bold}
</style>
<script language=javascript defer>
/*written by joelee@51js
*/
var tmpelement=null;
var dragelement=null;
var downx,downy,tmp_o_x,tmp_o_y;
var refelement=null;
var dragactive=0;
var draging=0;
function readydrag(){
dragactive=1;
if(event.srcelement.tagname!=div)
return;
dragelement=event.srcelement.parentnode;
tmpelement=dragelement.clonenode(true);
tmpelement.style.filter=alpha(opacity=90);
tmpelement.style.zindex=2;
dragelement.style.zindex=1;
tmpelement.style.position=absolute;
if(dragelement.parentnode.tagname!=body){
dragelement.style.left=dragelement.offsetleft+dragelement.parentnode.style.pixelleft;
dragelement.style.top=dragelement.offsettop+dragelement.parentnode.style.pixeltop;
}
downx=event.clientx;
downy=event.clienty;
tmp_o_x=dragelement.style.pixelleft;
tmp_o_y=dragelement.style.pixeltop;
tmpelement.style.visibility=hidden;
document.body.appendchild(tmpelement);
document.onmousemove=startdrag;
}
document.onmouseup=enddrag;
function startdrag(){
if(dragactive==1&&event.button==1&&dragelement!=null&&tmpelement!=null){
tmpelement.style.visibility=visible;
tmpelement.style.left=tmp_o_x+event.clientx-downx;
tmpelement.style.top=tmp_o_y+event.clienty-downy;
dragelement.style.backgroundcolor=#cccccc;
document.body.style.cursor=move;
draging=1;
}
}
function enddrag(){
if(dragactive==1&&tmpelement!=null){
if(draging==1){
dragelement.removenode(true);
draging=0;
}
tmpelement.style.filter=alpha(opacity=100);
tmpelement.style.zindex=1;
document.body.style.cursor=default;
if(refelement!=null&&refelement.parentnode!=null&&refelement.parentnode.tagname!=body){
tmpelement.style.width=refelement.parentnode.style.width;
tmpelement.style.position=;
refelement.parentnode.insertbefore(tmpelement,refelement);
}
}
dragelement=null;
tmpelement=null;
dragactive=0;
}
function readyinsert(){
if(dragactive==1){
var element=event.srcelement;
if(element==dragelement)return;
if(element.tagname!=div)
return;
if(element.classname==dragbar||element.classname==textsheet||element.classname==blankbar)
element=element.parentnode;
element.style.backgroundcolor=#cccccc;
element.style.filter=alpha(opacity=50);
refelement=element;
}
}
function failinsert(){
var element=event.srcelement;
if(element.tagname!=div)
return;
try{
if(element.classname==dragbar||element.classname==textsheet||element.classname==blankbar)
element=element.parentnode;
}catch(e){}
element.style.filter=alpha(opacity=100);
element.style.backgroundcolor=#ffffff;
refelement=null;
}
document.onselectstart=function(){return false}
</script>
</head>
<body>
<div id=div_one class=div_one style=position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>window</div>
<div class=textsheet style=border:1px solid #996666;>content<br>
content<br>
content<br>
content <br>
</div>
<div class=blankbar style=height:10px></div></div>
<div id=grid1 style=position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;>
<div style=height:20px;z-index:2; onmouseover=readyinsert() onmouseout=failinsert();>把层拖动到这儿</div>
</div>
<div id=grid2 style=position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;>
<div style=height:20px;z-index:2; background-image:url() onmouseover=readyinsert() onmouseout=failinsert();>把层拖动到这儿</div>
</div>
<div id=div_one class=div_one style=position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>bbs</div>
<div class=textsheet style=border:1px solid #996666;>content</div>
<div class=blankbar style=height:10px></div>
</div>
<div id=div_one class=div_one style=position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>log</div>
<div class=textsheet style=border:1px solid #996666;>content<br>
content<br>
content <br>
content<br>
</div>
<div class=blankbar style=height:10px></div>
</div>
<div id=div_one class=div_one style=position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>worker</div>
<div class=textsheet style=border:1px solid #996666;>content</div>
<div class=blankbar style=height:10px></div>
</div>
<div id=div_one class=div_one style=position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
<div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>tools</div>
<div class=textsheet style=border:1px solid #996666;>content</div>
<div class=blankbar style=height:10px></div>
</div>
</body>
</html>