jsをドラッグしてレイヤーのサイズ(幅)を変更します.

4251 ワード

JavaScript

マウスをドラッグしてdivの幅を変更します.

<body>
    <div id="div1" style="width: 100px; height: 100px; background: #CCCCCC; position: absolute; left: 500px; top: 200px;">
        <div style="width: 10px; height: 100px; background: #DAA520; position: absolute; left: 0; cursor: move;">div>
        <div style="width: 10px; height: 100px; background: #DAA520; position: absolute; right: 0; cursor: move;">div>
    div>

    <script type="text/javascript">
        var oDiv=document.getElementById("div1");

        oDiv.onmousedown=function(ev){
            var ev= ev || event;
            var b='';

            var disL=oDiv.offsetLeft;
            var disW=oDiv.offsetWidth;
            var disX=ev.clientX;

            if ( disX > disL + disW - 10) {
                b='right';
            }else if ( disX < disL + 10 ) {
                b='left';
            }

            if (oDiv.setCapture) {
                oDiv.setCapture();
            }

            document.onmousemove=function(ev){
                var ev = ev || event;

                switch (b){
                    case 'left':
                        oDiv.style.width= disW - ( ev.clientX - disX ) + 'px';
                        oDiv.style.left= disL + ( ev.clientX - disX ) + 'px';
                        break;
                    case 'right':
                        oDiv.style.width= disW + ( ev.clientX - disX ) + 'px';
                        break;
                }
            }

            document.onmouseup=function(){
                document.onmousemove=document.onmouseup=null;

                if (oDiv.releaseCapture) {
                    oDiv.releaseCapture();
                }
            }

            return false;
        }
    script>
body>

Ubuntuでnodejs+express+mongodb環境簡単教程を構築します.