拖動(dòng)層并定位
來(lái)源:易賢網(wǎng) 閱讀:905 次 日期:2016-06-30 09:54:19
溫馨提示:易賢網(wǎng)小編為您整理了“拖動(dòng)層并定位”,方便廣大網(wǎng)友查閱!

<!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();>把層拖動(dòng)到這兒</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();>把層拖動(dòng)到這兒</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>

更多信息請(qǐng)查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:拖動(dòng)層并定位
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)