javascript實現層拖動(1)
<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=1;
dragElement.style.zIndex=1;
tmpElement.style.position="absolute";
if(dragElement.parentNode.tagName!="BODY"){
dragElementdragElement.style.left=dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
dragElementdragElement.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.οnmοusemοve=startDrag;
}
document.οnmοuseup=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")
elementelement=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")
elementelement=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; height:99px; z-index:1; border:1px solid #996666; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Window</div>
Content</div>
<div id="div_one" class="div_one" style="position:absolute; left:508px; top:351px; width:433px; height:164px; z-index:1; border:1px solid #996666; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">MAP</div>
Content</div>
<div id="div_three" class="div_one" style="position:absolute; left:126px; top:267px; width:354px; height:227px; z-index:1; border:1px solid #996666; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="file:///C|/Program%20Files/snap_icon.gif" width="16" height="16">WORKER</div>
Content</div>
<div id="div_one" class="div_two" style="position:absolute; left:570px; top:127px; width:433px; height:153px; z-index:1; border:1px solid #996666; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
<div onMouseDown="readyDrag()" style="cursor:move; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="/snap_icon.gif" width="16" height="16">TOOLS</div>
Content</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>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章