javascript实现层拖动(1)

转载 2007年09月15日 08:47:00
<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>   

相关文章推荐

JS-Demo1:JavaScript实现表格列拖动

JS表格列可拖动特效: table{ border-top:solid 1px black; border-left:solid 1px black;...

sha1的javascript实现

使用javascript实现1到100的数依次相加,并将结果打印在页面上

这算是我的第二个javascript程序,今天学了一些关于它的运算法、操作符、逻辑运算、函数、不能被重载、变量申明的作用域、包装类、引用等知识,因内容较多,而且比较杂,故没有写下笔记,书上讲得还是很不...

详谈 JavaScript 数组去重 1 :实现篇

重要申明:感谢原文作者——toobug,与看原文请猛戳这里!我只是个转载者!零、引言JavaScript 的数组去重是一个老生常谈的话题了。随便搜一搜就能找到非常多不同版本的解法。昨天在微博上看到一篇...

javascript基础—介绍、实现、输出(1)

1.JavaScript介绍JavaScript是脚本语言 JavaScript是一种轻量级的编程语言 JavaScript是可插入HTML页面的编程代码 JavaScript插...

简易SHA1函数(JavaScript实现)

Link: http://www.web-tinker.com/article/20710.html 简易SHA1函数(JavaScript实现)   据说MD5目...

《Javascript权威指南》学习笔记之十七:BOM新成就(1)--客户端存储数据(Storage实现)

《Javascript权威指南》学习笔记之十七:BOM新成就(1)--客户端存储数据(Storage实现)。 数据构成了web站点的实际内容,这些数据多种多样,可以是独立的文件,也可以是位于某个...

javascript实现3D效果-示例1

前段时间忽起一趣,javascript能实现3D效果否?于是便在网上搜索了一堆,收获颇丰,不过搜索到的都是些高级货,对于想了解和入门的人来说可就有些难度了。经过一番探索、总结和测试,最后编写出了自己的...

JavaScript实现DIV层拖动

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)