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

Question

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

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

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

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

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>