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

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

　

标题 拖动层并定位
内容
    <!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 class=div_one style=position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
    <div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>window</div>
    <div class=textsheet style=border:1px solid #996666;>content<br>
    content<br>
    content<br>
    content <br>
    </div>
    <div class=blankbar style=height:10px></div></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>
    <div id=div_one class=div_one style=position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
    <div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>bbs</div>
    <div class=textsheet style=border:1px solid #996666;>content</div>
    <div class=blankbar style=height:10px></div>
    </div>
    <div id=div_one class=div_one style=position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
    <div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>log</div>
    <div class=textsheet style=border:1px solid #996666;>content<br>
    content<br>
    content <br>
    content<br>
    </div>
    <div class=blankbar style=height:10px></div>
    </div>
    <div id=div_one class=div_one style=position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
    <div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>worker</div>
    <div class=textsheet style=border:1px solid #996666;>content</div>
    <div class=blankbar style=height:10px></div>
    </div>
    <div id=div_one class=div_one style=position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #ffffff; layer-background-color: #ffffff; onmouseover=readyinsert() onmouseout=failinsert()>
    <div onmousedown=readydrag() style=cursor:move; border:1px solid #996666; background-color:#996666; height:20px name=dragdiv class=dragbar><img src=snap_icon.gif width=16 height=16>tools</div>
    <div class=textsheet style=border:1px solid #996666;>content</div>
    <div class=blankbar style=height:10px></div>
    </div>
    </body>
    </html>
随便看

　

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

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 23:11:18