javascript实现层拖动(1)

<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=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.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")  
            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>   
阅读更多
想对作者说点什么? 我来说一句

JavaScript制作拖动

2010年01月23日 1KB 下载

js做的拖动层,象google

2009年02月07日 24KB 下载

JS可拖动

2011年11月23日 18KB 下载

js 可拖动的层(DIV)

2013年05月18日 1KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭