DOM 요소의 높이를 크기를 조정할 수있게하려면 어떻게해야합니까?

Question

내 브라우저의 오른쪽 하단 구석에 고정 위치에있는 위젯이 있습니다.

사용자가 위젯의 머리글 부분을 클릭하여 위쪽으로 드래그하여 효과적으로 위젯 높이를 늘리 길 원합니다. 위젯의 아래쪽, 왼쪽 및 오른쪽 속성은 변경되지 않지만 상단은 css max-height에 정의 된 위젯의 최대 높이까지 허용하도록 변경 될 수 있어야합니다.

거기에 이와 같은 예가 있습니까? jQueryUI 크기를 조정할 수 있지만 불행히도이 프로젝트에서 jQueryUI 사용할 수 없습니다. 그러나 우리는 jQuery를 사용하고 있습니다.

모든 팁이나 아이디어 또는 jsfiddle 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>