Jquery 通过拖动调整div的大小

如图所示，我想通过向上拖动来调整“Document Icons”Div的大小，并且应该通过降低“Document Viewer”的高度来适应它。我需要一个临时滑块来显示屏幕上的拖动

问题修改：

HTML

<div id="centerDiv" class="centerDiv" style="position:relative;float: left;width: 63%;height: 600px;border-right: 10px solid #ddd;">

<div class="header" style="width: 100%;height: 15px;background-color: #ddd;"></div>

<div class="documentViewer" id="documentViewer" style="width: 100%;height: 500px;margin-bottom: 5px;">
    <iframe id="frameValue" name="frameValue" src="NoDocument.html" width="100%" height="500px" style="margin-bottom: 5px;"></iframe>
</div>

<div class="dragDiv" id="dragDiv" style="width: 100%;height: 15px;cursor: row-resize;background-color: green;"></div>

<div class="iconList" id="iconParent" style="position:relative;width: 100%;height: 70px;background-color: #ddd;"></div>

---

您可以使用jQueryUI实现类似的功能。它支持调整某些项目的大小。你可以找到这个例子。尽管这是在元素本身上，而不是在另一个元素上。但你可以这样做：

$（“#可调整大小”）.resizable（）
#可调整大小{
宽度：150px；
高度：150像素；
填充：0.5em；
}
#可调整大小的h3{
文本对齐：居中；
保证金：0；
}
.按钮{
位置：绝对位置；
底部：0px；
文本对齐：居中；
}
.内容{
高度：自动；
溢出：滚动；
溢出x：隐藏；
身高：100%；
页边顶部：-5px；
}

jQuery UI可调整大小-默认功能
内容

内容

内容

内容

内容

内容

内容



按钮
请将您的代码输入此处，希望您能得到答案。看看这个答案。哪个版本的Jquery UI库将支持此功能？不完全确定，您应该始终尝试使用最新版本。但是从1.6及更高版本开始，它就在那里。是否获得了
.resizeable（）
的非jquery版本？
$('#dragBar').mousedown(function(e) {
    e.preventDefault();
    dragging = true;

    var main = $('#documentViewer');

    var scrollBar = $("<div>'",
                    {id:'scrollBar',
                    css: {
                        height: '5px',
                        top:'530px',
                        left:'40px',
                        z-index:'100',
                        background-color: 'red'
                     }
                    }).appendTo('body');
    $(document).mousemove(function(e) {
      scrollBar.css("top",e.pageX+2);
   });

    if(dragging) {            
        $(window).mouseup(function(e) {
            $('#position').html(e.pageX +', '+ e.pageY);
            $('#iconParent').css("height",e.pageY+2);
            $('#documentViewer').css("height",(600-(e.pageY+30)));
            $(document).unbind('mousemove');
        });
    }
});