javascript - Dragging a div a fixed distance from bottom to top -

i creating project want able drag div (a drawer) (mostly) positioned off bottom of screen fixed distance on y axis. distance want move height of div (drawer - minus drawer handle).

it pretty easy working top bottom, reversing posing quite challenge. feel might simple math error.

i have put fiddle better illustrate issues i'm having.
http://jsfiddle.net/q8de6/2/

here's code: html

 <div id="panelwrapper">   <div id="panel" class="panel">     <p> height of drawer dynamic, , slide appropriate amounted based on height of content. </p>     <p> type of content can included in here. body of drawer , drawer pull tab can styled see fit, modify css/styles.css file. </p>      <!--necessary div slide tab, modify needed, don't delete -->     <div class="slide">         <a id="drawerslide" href="#" class="drawer-slide">             <table id="stab" class="slidetab">               <tr>                   <td id="sttext1"></td>                   <td id="stimg">pull here.</td>                   <td id="sttext2"></td>                 </tr>             </table>         </a>       </div>   </div><!--/panel -->  </div><!--/panelwrapper -->    <div id="content"> <div id="header">     <div id="menubar">         <h3>header bar text.</h3>     </div> </div>  <div id="container">  </div>  <div id="footer">     <p>footer area.</p> </div>  </div><!--/content --> 

slide function: js:

function drawerslide(slidedir) { switch (slidedir) {     case 'bottomtotop':             //drawer styling             $('.panel, .slide').addclass('bottotop');             $('.panel').addclass('paneltb');             $('.slide').addclass('slidebottotop');             $('#stab').addclass('slidetab');             $('.panel p').filter(":first").css('padding-top','50px');              //hide overflown y axis content. won't cause conflicts existing code/page.             $('body').css('overflow-y','hidden');              botstartpos = $(window).height() - 50;             offset = $('#panel').offset();              panelheight = $('#panel').outerheight();             topendpos = botstartpos - panelheight +50;             ypos = botstartpos;              // if need different drawer starting point, adjust starting position here (50).             panelheight = parsefloat(panelheight) - 50;               console.log("botstartpos:" + botstartpos);             console.log("topendpos:" + topendpos);             console.log("ypos:" + ypos);              $('.panel').css('top', botstartpos);              $('#panel').draggable({                     axis: "y",                     containment: [0, botstartpos, 0, topendpos] //0, botstartpos, 300, topendpos                  },                  {                 drag: function( event, ui ) {                     if  (ypos > botstartpos || ypos < topendpos) {                         return false;                     }                      else {                         offset = $(this).offset();                         ypos = offset.top;                         console.log(ypos);                     }                 }               });  } }   $(document).ready(function() {         drawerslide("bottomtotop");     }); 

i'm thinking issue might way i'm using offset.top command move drawer, i'm stumped how correctly.

right happening, when click/hold handle, "jumps" fixed distance, instead of being able drag it. also, can't drag down put drawer away, can drag once again , "jumps" down fixed distance. not i'm after.

the desired result i'm looking 1 of typical "drawer" behavior. when user clicks , holds on handle, can "pull" drawer fixed distance, , "push" down same fixed distance, handle never falls off screen.

my guess it's math problem containment function. still don't understand well, problem may lie within coordinates i'm using?

any advice appreciated. :)