javascript实现拖拽弹框高度，可调节弹框大小

1.页面刚开始加载时弹框高度比较小，但是因为数据的缘故，如果要看清全部的数据，只能给弹框的高度设置高一些，因为这就要求弹框的高度可以拖拽，实现代码如下：（原生js实现）

HTML代码：

<div id="drag">
    <div class="resizeT"></div>
</div>

CSS代码：

body{
            width:100%;
            height:1550px;
            overflow: hidden;
        }
        * {
            padding: 0;
            margin: 0;
        }
        #drag {
            position: absolute;
            bottom: 0;
            background: #e9e9e9;
            width: 100%;
            height: 50vh;
            min-height: 30px;
        }
        .resizeT{
            position: absolute;
            width: 100%;
            height: 5px;
            top: 0;
            z-index: 2;
            cursor:n-resize;
        }

JS代码：

//下面定义了一个对象，直接调用对象里面的方法即可
var get = {
            byId: function (id) {
                return typeof id === "string" ? document.getElementById(id) : id
            },
            byClass: function (sClass, oParent) {
                var aClass = [];
                var reClass = new RegExp("(^| )" + sClass + "( |$)");
                var aElem = this.byTagName("*", oParent);
                for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
                return aClass
            },
            byTagName: function (elem, obj) {
                return (obj || document).getElementsByTagName(elem)
            }
        };
        var dragMinHeight = 50;
        function resize(oParent, handle, isLeft, isTop, lockX, lockY) {
            handle.onmousedown = function (event) {
                var event = event || window.event;
                var disY = event.clientY - handle.offsetTop;
                console.log(handle.offsetTop);
                console.log(disY);
                var iParentTop = oParent.offsetTop;
                var iParentHeight = oParent.offsetHeight;
                console.log(iParentHeight+" "+iParentTop);
                document.onmousemove = function (event) {
                    var event = event || window.event;
                    var iT = event.clientY - disY;
                    var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;
                    var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
                    isTop && (oParent.style.top = iParentTop + iT + "px");
                    iH < dragMinHeight && (iH = dragMinHeight);
                    iH > maxH && (iH = maxH);
                    lockY || (oParent.style.height = iH + "px");
                    if ( isTop && iH == dragMinHeight) document.onmousemove = null;
                    return false;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            }
        };
        window.onload = window.onresize = function () {
            var oDrag = document.getElementById("drag");
            var oT = get.byClass("resizeT", oDrag)[0];
            resize(oDrag, oT, false, true, true, false);
        }

上面代码的实现效果就是：
鼠标移动到拖拽区域，弹框的高度可以进行调节。。

2.除了原生javascript代码，我们也可以用一些框架来实现这种效果，easyui就可以哦，我已经尝试过了，代码就不附加了~