网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 拖动层并定位
内容
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "">
    <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=2;
    dragElement.style.zIndex=1;
    tmpElement.style.position="absolute";
    if(dragElement.parentNode.tagName!="BODY"){
    dragElement.style.left=dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
    dragElement.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"||element.className=="textSheet"||element.className=="blankBar")
    element=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"||element.className=="textSheet"||element.className=="blankBar")
    element=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" onMouseOver="readyInsert()" onMouseOut="failInsert()">
    <div onMouseDown="readyDrag()" name="dragDIV"><img src="snap_icon.gif" width="16" height="16">Window</div>
    <div>Content<br>
    Content<br>
    Content<br>
    Content <br>
    </div>
    <div></div></div>
    <div id="grid1">
    <div onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>
    </div>
    <div id="grid2">
    <div onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>
    </div>
    <div id="div_one" onMouseOver="readyInsert()" onMouseOut="failInsert()">
    <div onMouseDown="readyDrag()" name="dragDIV"><img src="snap_icon.gif" width="16" height="16">BBS</div>
    <div>Content</div>
    <div></div>
    </div>
    <div id="div_one" onMouseOver="readyInsert()" onMouseOut="failInsert()">
    <div onMouseDown="readyDrag()" name="dragDIV"><img src="snap_icon.gif" width="16" height="16">Log</div>
    <div>Content<br>
    Content<br>
    Content <br>
    Content<br>
    </div>
    <div></div>
    </div>
    <div id="div_one" onMouseOver="readyInsert()" onMouseOut="failInsert()">
    <div onMouseDown="readyDrag()" name="dragDIV"><img src="snap_icon.gif" width="16" height="16">Worker</div>
    <div>Content</div>
    <div></div>
    </div>
    <div id="div_one" onMouseOver="readyInsert()" onMouseOut="failInsert()">
    <div onMouseDown="readyDrag()" name="dragDIV"><img src="snap_icon.gif" width="16" height="16">Tools</div>
    <div>Content</div>
    <div></div>
    </div>
    </body>
    </html>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 10:36:40