87,917
社区成员
发帖
与我相关
我的任务
分享DIV 层覆盖问题？
<style type="text/css">
#aa{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#aa p{
cursor:pointer;
background:#999;
margin-top:0;
}
#yy{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#yy p{
cursor:pointer;
background:#999;
margin-top:0;
}
</style>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
var M = null,X,Y;
function m(id){
M = $(id);
M.style.zIndex = "1";
X = parseInt(M.offsetLeft) - event.x;
Y = parseInt(M.offsetTop) - event.y;
}
document.onmousemove = function (){
if(M){
if(X + event.x > 800 && Y + event.y > 300 ){
M.style.left = 800;
M.style.top = 300;
}else if(X + event.x > 800){
M.style.left = 800;
M.style.top = Y + event.y;
}else if(Y + event.y > 300){
M.style.left = X + event.x;
M.style.top = 300;
}else{
M.style.left = X + event.x;
M.style.top = Y + event.y;
}
event.returnValue = false;
}
}
document.onmouseup = function (){M = null;}
</script>
</head>
<body background="wallpaper.jpg">
<div id="aa">
<p onmousedown="m('aa')">xx</p>
</div>
<div id="yy">
<p onmousedown="m('yy')">yy</p>
</div>
</body>
这是代码，两个DIV 拖动xx到 yy上面把yy 覆盖 点yy 覆盖 xx 怎么做？
#aa{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#aa p{
cursor:pointer;
background:#999;
margin-top:0;
}
#yy{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#yy p{
cursor:pointer;
background:#999;
margin-top:0;
}
</style>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
var M = null,X,Y;
function m(id){
M = $(id);
M.style.zIndex = "1";
X = parseInt(M.offsetLeft) - event.x;
Y = parseInt(M.offsetTop) - event.y;
}
document.onmousemove = function (){
if(M){
if(X + event.x > 800 && Y + event.y > 300 ){
M.style.left = 800;
M.style.top = 300;
}else if(X + event.x > 800){
M.style.left = 800;
M.style.top = Y + event.y;
}else if(Y + event.y > 300){
M.style.left = X + event.x;
M.style.top = 300;
}else{
M.style.left = X + event.x;
M.style.top = Y + event.y;
}
event.returnValue = false;
}
}
document.onmouseup = function (){M = null;}
</script>
</head>
<body background="wallpaper.jpg">
<div id="aa">
<p onmousedown="m('aa')">xx</p>
</div>
<div id="yy">
<p onmousedown="m('yy')">yy</p>
</div>
</body>
这是代码，两个DIV 拖动xx到 yy上面把yy 覆盖 点yy 覆盖 xx 怎么做？
...全文
请发表友善的回复…
发表回复
wishifef 2011-01-04
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#aa{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#aa p{
cursor:pointer;
background:#999;
margin-top:0;
}
#yy{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#yy p{
cursor:pointer;
background:#999;
margin-top:0;
}
</style>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
var M = null,X,Y;
var i=1;
function m(id){
M = $(id);
M.style.zIndex = i++;
X = parseInt(M.offsetLeft) - event.x;
Y = parseInt(M.offsetTop) - event.y;
}
document.onmousemove = function (){
if(M)
{
if(X + event.x > 800 && Y + event.y > 300 )
{
M.style.left = 800;
M.style.top = 300;
}else if(X + event.x > 800){
M.style.left = 800;
M.style.top = Y + event.y;
}else if(Y + event.y > 300){
M.style.left = X + event.x;
M.style.top = 300;
}else{
M.style.left = X + event.x;
M.style.top = Y + event.y;
}
event.returnValue = false;
}
}
document.onmouseup = function (){M = null;}
</script>
</HEAD>
<BODY>
<div id="aa">
<p onmousedown="m('aa')">xx</p>
</div>
<div id="yy">
<p onmousedown="m('yy')">yy</p>
</div>
</BODY>
</HTML>
