마우스로 div 박스 크기조절

결실 2008. 11. 8. 20:58

<html>
<head>
<style type="text/css">
.d1 {position:relative; top:0; width:100%; height:200px;
background-color:7DC800; overflow:auto;}
.d2 {position:relative; top:0; width:100%; height:200px;
background-color:FFFFC5; overflow:auto;}
#hr {cursor:pointer;}
</style>
<script type="text/javascript">
var startpos, diffpos=0;
var erlaubt = false;

function on_mouse_down(e) {
        if (!document.all)
                startpos = e.screenY + diffpos;
        else
                startpos = event.clientY + diffpos;

        erlaubt = true;
        return false;
}

function on_mouse_up(e) {
        erlaubt = false;
        return false;
}

function on_mouse_move(e) {
        if (erlaubt) {
                if (!document.all)
                        jetztpos = e.screenY;
                else
                        jetztpos = event.clientY;

                diffpos = startpos-jetztpos;

                if (diffpos > -200 && diffpos < 200) {
                        document.getElementById("d1").style.height = 200 - diffpos + "px";
                        document.getElementById("d2").style.height = 200 + diffpos + "px";
                }
        }
}

function init() {
        document.getElementById("hr").onmousedown = on_mouse_down;
        document.onmouseup = on_mouse_up;
        document.onmousemove = on_mouse_move;
}
</script>
</head>
<body onload="init()">
<div class="d1" id="d1">
        1<br />
        1<br />
        1<br />
</div>
<hr class="hr" id="hr" />
<div class="d2" id="d2">
        2<br />
        2<br />
        2<br />
</div>
</body>
</html>