如何像 jsfiddle.net 中那样调整多个相邻文本区域的大小？

Question

如何像jsfiddle.net一样通过在区域1、2和3上拖动鼠标来调整textarea的大小网站？

我的代码是：

HTML:

<div id="content">
    <fieldset id="LeftPanel">
        <div id="div_A" class="window top">
            A
        </div>
        <div id="div_left" class="handler_horizontal"></div>
        <div id="div_B" class="window bottom">
            B
        </div>
    </fieldset>
    <div id="div_vertical" class="handler_vertical"></div>
    <fieldset id="RightPanel">
        <div id="div_C" class="window top">
            C
        </div>
        <div id="div_right" class="handler_horizontal"></div>
        <div id="div_D" class="window bottom">
            D
        </div>
    </fieldset>
</div>

JS:

$(function () {
    window.onresize = resize;
    resize();
});

function resize() {
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight));
    var divHight = 20 + $("#div_left").height();//20=body padding:10px
    $("#content").css({ "min-height": h - divHight + "px" });
    $("#div_vertical").css({ "height": h - divHight + "px" });
    $("#LeftPanel").css({ "height": h - divHight + "px" });
    $("#RightPanel").css({
        "height": h - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"
    });
}

CSS:

body {
    background: none repeat scroll 0 0 #EFEFEF;
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 10px;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset{
    border: 0 none;
}
#LeftPanel
{
    width: 50%;
    float: left;
}
#RightPanel
{
    width: 50%;
    float: right;
}
.handler_vertical {
    cursor: col-resize;
    width: 8px;
    float: left;
}
.handler_horizontal {
    cursor: row-resize;
    height: 8px;
    width: 100%;
    float: left;
}
.window {
    border: 1px solid #ADADAD;
    width: 100%;
    float: left;
}
.top {
    height: 25%;
}
.bottom {
    height: 75%;
}

您还可以从以下位置获取代码：http://jsfiddle.net/xBjnY /

Answer 1

您能否检查此解决方案：http://jsfiddle.net/xBjnY/9/

$(function() {
    window.onresize = resize;
    resize();
});

function resize() {
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight));
    var divHight = 20 + $("#div_left").height(); //20=body padding:10px
    $("#content").css({
        "min-height": h - divHight + "px"
    });
    $("#div_vertical").css({
        "height": h - divHight + "px"
    });
    $("#LeftPanel").css({
        "height": h - divHight + "px"
    });
    $("#RightPanel").css({
        "height": h - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"
    });
}

jQuery.resizable = function(resizerID, vOrH) {
    jQuery('#' + resizerID).bind("mousedown", function(e) {
        var start = e.pageY;
        if (vOrH == 'v') start = e.pageX;
        jQuery('body').bind("mouseup", function() {
            jQuery('body').unbind("mousemove");
            jQuery('body').unbind("mouseup");

        });
        jQuery('body').bind("mousemove", function(e) {
            var end = e.pageY;
            if (vOrH == 'v') end = e.pageX;
            if (vOrH == 'h') {
                jQuery('#' + resizerID).prev().height(jQuery('#' + resizerID).prev().height() + (end - start));
                jQuery('#' + resizerID).next().height(jQuery('#' + resizerID).next().height() - (end - start));
            }
            else {
                jQuery('#' + resizerID).prev().width(jQuery('#' + resizerID).prev().width() + (end - start));
                jQuery('#' + resizerID).next().width(jQuery('#' + resizerID).next().width() - (end - start));
            }
            start = end;
        });
    });
}

jQuery.resizable('div_vertical', "v");
jQuery.resizable('div_right', "h");
jQuery.resizable('div_left', "h");

这是您正在寻找的吗？有帮助吗？

Answer 2

您需要编写一些核心 JavaScript 代码。 ;) 在 mousedown 事件中，您存储鼠标位置，并在 setTimeout （或 setInterval）中检查当前鼠标位置（例如每 16 毫秒一次）获得〜60FPS，所以看起来不错）。然后评估起始鼠标位置和当前鼠标位置之间的差异并更新 css/宽度/高度。