关闭

javascript实现层拖动(1)

385人阅读 评论(0) 收藏 举报
<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>   
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:33367次
    • 积分:461
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:25篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论