如何让一个DIV层在另一DIV层里移动

我说下思路，代码自己到网上搜，改一下就可以了
div1:父div
div2:子divdiv2的CSS，position: relative
拖动时判断div2的CSS属性left,top,right,bottom，如为负数，则将它的相关left,top,right,bottom置为0，就是使div2在div1的边上

解决方案 »

  1.   

    <body>
    <div id="div1" style="background-color:#003366;height:500px;width:500px;">
    <div id="div2" onmousedown="down()" onmousemove="move();" onmouseup="up()" style="POSITION: relative; LEFT: 0px; TOP: 0px; RIGHT:0px;BOTTOM:0px; WIDTH: 200px;HEIGHT: 200px; BACKGROUND-COLOR: #FFFF00">
    </div>
    </div>
    <span id=span3></span>
    </body>
    <script> 
    var isdown = false 
    var beginx,beginy 
    function down() { 
    document.all["span3"].innerText="div2.style.right:"+div2.style.right+"\n"+"div2.style.bottom:"+div2.style.bottom+"\n"+"div2.style.left:"+div2.style.left+"\n"+"div2.style.top:"+div2.style.topisdown = true; 
    } function move() { 
    if (isdown){ 
    var endx = event.clientX;
    var endy = event.clientY; 
    if(parseInt( div2.style.left ) + endx-beginx<0){
    div2.style.left=0;
    }else{
    if (parseInt( div2.style.left ) + endx-beginx>300)
    {
    div2.style.left=300;
    }
    else{
    div2.style.left = parseInt( div2.style.left ) + endx-beginx; 
    }
    }
    if(parseInt( div2.style.top ) + endy-beginy<0){
    div2.style.top=0;
    }else{
    if (parseInt( div2.style.top ) + endy-beginy>300)
    {
    div2.style.top=300;
    }
    else{
    div2.style.top = parseInt( div2.style.top ) + endy-beginy; 
    }
    }
    } 
    beginx = event.clientX; 
    beginy = event.clientY; 
    } function up() { 
    isdown = false; 
    } 
    document.body.onmousemove = move 
    document.body.onmouseup = up 
    </script>