DOM要素の高さをサイズ変更可能にするにはどうすればよいですか？

Question

私のUIのウィジェットは、ブラウザの右下にある固定位置にあります。

私は、ユーザーがウィジェットのヘッダー部分をクリックし、それを上にドラッグしてウィジェットの高さを効果的に上げることができるようにしたいと考えています。ウィジェットのボトム、左、右のプロパティは変更されませんが、topはcss max-heightで定義されているようにウィジェットの最大の高さまで変更することができます。

このような例がありますか？ jQueryUIはサイズ変更可能な動作をしていますが、残念ながらこのプロジェクトでjQueryUIを使用することはできません。しかし、私たちはjQueryを使用しています。

ヒントやアイデア、またはすべてのexaplesをいただければ幸いです。正しい方向に向かうだけのもの。私はサイズ変更可能な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>