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

Question

我的ui中有一个小部件，该小部件位于浏览器右下角的固定位置。

我希望用户能够单击小部件的标题部分，并能够向上拖动它并有效地增加小部件的高度。 小部件的bottom，left和right属性将保持不变，但top应当能够进行更改，以允许达到其css max-height定义的小部件的最大高度。

那里有这样的例子吗？ 我知道jQueryUI具有可调整大小的行为，但是不幸的是我无法在该项目上使用jQueryUI。 但是，我们正在使用jQuery。

任何技巧或想法或jsfiddle实例都将不胜感激。 只是一些让我朝正确方向前进的方法。 我看了一下CSS3可调整大小的图标，它将标准的调整大小图标放在此文本区域的右下角。

Answer 1

也许这个插件可以帮助？

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

Answer 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>