Javascript 将div从下到上拖动固定距离

我正在创建一个项目，其中我希望能够拖动一个div（抽屉），该div（抽屉）在Y轴上（主要）位于屏幕底部一个固定距离之外。我想移动的距离是div的高度（抽屉-减去抽屉把手）

从上到下实现这一点非常容易，但逆转这一点是一个相当大的挑战。我觉得这可能只是一个简单的数学错误

为了更好地说明我所面临的问题，我整理了一把小提琴。

这是我的密码： HTML

 <div id="panelWrapper">
  <div id="panel" class="panel">
    <p> The height of this drawer is dynamic, and will slide the appropriate amounted based on the height of the content. </p>
    <p> Any type of content can be included in here. The body of the drawer and the drawer pull tab can also be styled as you see fit, just modify the css/styles.css file. </p>

    <!--necessary div for slide tab, modify as needed, but 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 -->

此抽屉的高度是动态的，将根据内容的高度滑动相应的抽屉

这里可以包含任何类型的内容。抽屉的主体和抽屉拉标签也可以根据您的需要设置样式，只需修改css/styles.css文件即可

标题栏文本。
页脚区域

幻灯片功能： 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. Hopefully this won't cause any conflicts with your 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 you need a different drawer starting point, adjust the 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");
    });

功能抽屉滑动（滑动编辑器）{
开关（滑动式）{
“底部托普”案例：
//抽屉样式
$（'.panel，.slide'）.addClass（'botToTop'）；
$（'.panel'）.addClass（'panelTB'）；
$（'.slide'）.addClass（'slidebtottop'）；
$（'#sTab'）.addClass（'slideTab'）；
$（'.panel p'）.filter（“：first”）.css（'padding-top'，'50px'）；
//隐藏溢出的Y轴内容。希望这不会与现有代码/页面产生任何冲突。
$（'body'）.css（'overflow-y'，'hidden'）；
botStartPos=$（窗口）.height（）-50；
偏移量=$（“#面板”）.offset（）；
panelHeight=$（“#panel”）.outerHeight（）；
topEndPos=botStartPos-面板高度+50；
yPos=botStartPos；
//如果需要不同的抽屉起始点，请调整此处的起始位置（50）。
panelHeight=parseFloat（panelHeight）-50；
console.log（“botStartPos:+botStartPos”）；
控制台日志（“topEndPos:+topEndPos”）；
console.log（“yPos:+yPos”）；
$（'.panel'）.css（'top'，botStartPos）；
$（“#面板”）。可拖动({
轴：“y”，
包含：[0，botStartPos，0，topEndPos]//0，botStartPos，300，topEndPos
}, 
{
拖动：函数（事件、ui）{
如果（yPos>botStartPos | | yPos

我认为问题可能在于我使用offset.top命令移动抽屉的方式，但我很难正确地执行此操作

现在发生的事情是，当你点击/握住手柄时，它会“跳跃”到固定的距离，而不是拖动它。此外，您不能向下拖动以将抽屉收起来，但您可以再次向上拖动，它会沿固定距离“跳跃”。不是我想要的

我想要的结果是一种典型的“抽屉”行为。当用户点击并按住手柄时，他们可以将抽屉向上拉固定距离，然后再向下推固定距离，这样手柄就不会从屏幕上脱落

我猜这是一个包含函数的数学问题。我仍然不能完全理解它，所以问题可能在我使用的坐标范围内

---

如有任何建议，将不胜感激。：）

我花了更多的时间来摆弄Dragable的坐标系，但我还是迷路了。如果有人能看一眼小提琴，给我一个正确的方向，我会非常感激。有没有善良的灵魂能给我一个建议？我还是不明白。谢谢几个月来，我一直在想这个概念，但我还是不明白。有人有什么建议吗？这一定很简单，我只是看不到。