拖动层并定位

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

拖动层并定位

来源：易贤网阅读：628 次日期：2016-06-30 09:54:19

温馨提示：易贤网小编为您整理了“拖动层并定位”,方便广大网友查阅！

<!doctype html public -//w3c//dtd html 4.01 transitional//en

<html>

<head>

<title>drag layer</title>

<style>

body,table{color:#000000;

font-size:12px;

}

div.div_one{}

.dragbar{color:#ffffff;

font-weight:bold}

</style>

/*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 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>

</div>

</div>

</div>

<div class=textsheet style=border:1px solid #996666;>content</div>

</div>

<div class=textsheet style=border:1px solid #996666;>content<br>

content<br>

content <br>

content<br>

</div>

</div>

<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>

<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>

</body>

</html>

上一篇：js实现下拉框具有输入功能的方法

下一篇：使用iisftp.vbs删除ftp站点

易贤网手机网站地址：拖动层并定位

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！