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无刷新添加新层,拖动DIV层可互换位置的JavaScript实现

无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果...
  • life66881
  • life66881
  • 2015年04月04日 18:09
  • 497

javascript实现层的拖动

  var Obj;function MouseDown(obj){Obj= obj;Obj.setCapture();//指定窗口里设置鼠标捕获Obj.l=event.x-Obj.style.pix...
  • ocean20
  • ocean20
  • 2008年06月13日 12:11
  • 511

javascript实现层拖动(2)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" lang="gb2312">#oute...
  • xzzhouhu
  • xzzhouhu
  • 2007年09月15日 08:48
  • 610

javascript实现层拖动(3)

from fenger.tk#root {BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 12px; BORD...
  • xzzhouhu
  • xzzhouhu
  • 2007年09月15日 08:49
  • 397

JavaScript实现拖动,伸缩层

 
  • sunshinestation
  • sunshinestation
  • 2008年07月23日 17:22
  • 814

javascript拖动层

var move = false; function div2move(obj) { obj.style.cursor = "move"; if(move) { ...
  • anfeng_8379
  • anfeng_8379
  • 2010年08月19日 16:30
  • 208

javascript中拖动层

             function   Pos(x,y)     {      this.x   =   x;      this.y   =   y;     }         var  ...
  • bxf0011
  • bxf0011
  • 2007年04月28日 11:33
  • 729

拖动浮层(div等任何标签)

拖动浮层(div等任何标签)  之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至没看懂。看了几个方法后发现基本上都是使用mousedown、mousem...
  • csmzl
  • csmzl
  • 2016年10月13日 15:54
  • 634

一个非常好用的可拖动的jquery弹出层

不用解释直接上代码,代码有注释,不懂的话直接拿去用。这只是一个简单的效果,若要复杂的效果请参考http://www.hestudy.com/file/demo/tipswindown/页面挡下来。 ...
  • mdcmy
  • mdcmy
  • 2012年07月10日 17:54
  • 2349

拖动的层的javascript实现

 var defSelectContorl = null,charSelectContorl = null,datetimeSelectContorl = null;function filter(...
  • dotnet90
  • dotnet90
  • 2006年07月24日 14:04
  • 699
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript实现层拖动(1)
举报原因:
原因补充:

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