<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd";>
<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>
