拖动层并定位_易贤网_足球游戏_中国足彩网￥体育资讯$

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

拖动层并定位

来源：易贤网阅读：812 次日期：2014-10-09 10:50:58

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

<!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 style="height:20px;z-index:2;" onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>

</div>

<div style="height:20px;z-index:2; background-image:url()" onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</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 class="textSheet" style="border:1px solid #996666;">Content</div>

</div>

<div class="textSheet" style="border:1px solid #996666;">Content</div>

</div>

</body>

</html>

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目

上一篇：js隐藏状态栏连接地址

下一篇：checkbox全选优秀代码

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

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