resizeable window using jquery.draggable

gistfile1.txt

    $(document).ready(function () {

        setCurrentTabHeaderText();
        
      //  $("#ownedTaskSection").resizable();

          var prevY = 0,
              nextY =0,
              offset = 0;

    
    setTimeout(function(){
        var ownedTaskHeight = $('#ownedTaskSection').height();
        var assignedTaskHeight = $('#assignedTaskSection').height();
        var assignedTaskPos = $('#assignedTaskSection').offset();

         $('hr.hr-split').draggable({

            start: function(){
               prevY = $("hr.hr-split").offset().top;
                console.log("drag started");
                
            },

            drag: function(){

                $('hr.hr-split').css('background-color', "white");

            },

            stop: function(){

               nextX=$("hr.hr-split").offset().left;
               nextY = $("hr.hr-split").offset().top;
               
               offset = nextY-prevY;
               ownedTaskHeight +=offset;
               $('#ownedTaskSection').height(ownedTaskHeight);
               
               //reset Hr position after set height; because the the HR position will be affected.
               $("hr.hr-split").offset({top:nextY, left:nextX});

               assignedTaskPos.top+=offset;

             $('#assignedTaskSection').offset(assignedTaskPos);
 
             
              // $('#assignedTaskSection').height(assignedTaskHeight);
               
                console.log("drag ends");
                $('hr.hr-split').css('background-color', "transparent");

            }


        });




    }, 2000);


    });