如何使 DOM 元素的高度可调整大小？答案

【问题标题】：How can I make a DOM element's height resizable?如何使 DOM 元素的高度可调整大小？
【发布时间】：2011-10-21 17:06:04
【问题描述】：

我的用户界面中有一个小部件，它位于浏览器右下角的固定位置。

我希望用户能够单击小部件的标题部分并能够向上拖动它并有效地增加小部件的高度。小部件的底部、左侧和右侧属性将保持不变，但顶部应该能够更改以允许达到由其 css max-height 定义的小部件的最大高度。

有没有类似的例子？我知道 jQueryUI 具有可调整大小的行为，但不幸的是我不能在这个项目上使用 jQueryUI。然而，我们正在使用 jQuery。

非常感谢任何提示或想法或 jsfiddle 示例。只是为了让我朝着正确的方向前进。我看了一个 CSS3 可调整大小，它把标准的调整大小图标放在右下角，就像这个 textarea。

【问题讨论】：

嗯...看看 JQueryUI 源代码，看看它是怎么做的怎么样？

标签： javascript html css resizable jquery-resizable

【解决方案1】：

也许这个插件可以提供帮助？

http://dev.iceburg.net/jquery/jqDnR/

【讨论】：

【解决方案2】：

只用 jQuery 就可以做到这一点。在我的脑海中，你可能会做这样的事情：

<div id="widget">
    <h3 id="widget-header">Header</h3>
    some content
</div>

<script language="javascript" type="text/javascript">
    var clientY = 0;
    var offset = null;
    var changeSize = false;

    $(function () {
        $("#widget-header")
            .mousedown(function (event) {
                clientY = event.pageY;
                offset = $("#widget").offset();
                changeSize = true;
            })
            .mousemove(function (event) {
                if (changeSize) {

                    // get the changes
                    var difY = event.pageY - clientY;
                    offset.top += difY;

                    // animate the changes
                    $("#widget").offset({ top: offset.top, left: offset.left });
                    $("#widget").height($("#widget").height() - difY);

                    // update the new positions
                    clientY = event.pageY;
                }
            })
            .mouseup(function (event) { changeSize = false; })
            .mouseout(function(event) { changeSize = false; });
    });

</script>

【讨论】：