如何讓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>