可拖拽可扩展面板

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .panel {
                width: 400px;
                height: 200px;
                background-color: azure;
                position: absolute;
                left: 100px;
                top: 100px;
            }
            .title {
                width: 100%;
                height: 20px;
                line-height: 20px;
                text-align: center;
                color: white;
                font-size: small;
                background-color: darkgrey;
                cursor: pointer;
            }
            .dr {
                position: absolute;
                width: 30px;
                height: 100%;
                right: -15px;
                top: 0;
                /*background-color: red;*/
                
                cursor: e-resize;
            }
            .db {
                position: absolute;
                height: 30px;
                width: 100%;
                bottom: -15px;
                /*    background-color: blue;*/
                
                cursor: n-resize;
            }
        </style>
    </head>

    <body>
        <div class="panel">
            <div class="title">可扩展panel</div>
        </div>

        <div class="panel">
            <div class="title">可扩展panel</div>
        </div>
    </body>

</html>
<script>
    function drag(obj, opanel) {
        var disx = 0;
        var disy = 0;
        resizable(opanel);
        obj.onmousedown = function(e) {
            var e = e || event;
            disx = e.clientX - opanel.offsetLeft;
            disy = e.clientY - opanel.offsetTop;
            document.onmousemove = function(e) {
                var e = e || event;
                opanel.style.left = (e.clientX - disx) + "px";
                opanel.style.top = (e.clientY - disy) + "px";
            }
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        }
    }

    function resizable(objpanel) {
        var db = document.createElement("div");
        db.className = "db";
        var dr = document.createElement("div");
        dr.className = "dr";
        var drb = document.createElement("div");
        drb.className = "drb";
        objpanel.appendChild(db);
        objpanel.appendChild(dr);
        objpanel.appendChild(drb);
        resize(db, objpanel, "db");
        resize(dr, objpanel, "dr");
        resize(drb, objpanel, "drb");
    }

    function resize(objdiv, objpanel, type) {
        var disx = 0;
        var disy = 0;
        objdiv.onmousedown = function(e) {
            var e = e || event;
            disx = e.clientX - objdiv.offsetLeft;
            disy = e.clientY - objdiv.offsetTop;
            document.onmousemove = function(e) {
                var e = e || event;
                objdiv.style.left = e.clientX - disx;
                objdiv.style.top = e.clientY - disy;
                switch (type) {
                    case "drb":
                        objpanel.style.width = e.clientX - disx+15 + "px";
                        objpanel.style.height = e.clientY - disy+15 + "px";
                        break;
                    case "dr":
                        objpanel.style.width = e.clientX - disx +15+ "px";
                        break;
                    case "db":
                        document.title = e.clientY - disy;
                        objpanel.style.height = e.clientY - disy +15+ "px";
                        break;
                }
            }
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        }
    }
    window.onload = function() {
        drag(document.getElementsByClassName("title")[0], document.getElementsByClassName("panel")[0]);
        drag(document.getElementsByClassName("title")[1], document.getElementsByClassName("panel")[1]);
    }
</script>

 

posted @ 2015-05-26 14:50  蒙面侠  阅读(260)  评论(0)    收藏  举报