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 怎么做？ 

解决方案 »

  1.   


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