javascript - 如何创建可拖动的菜单 div（桌面和移动）

Question

以上内容如何制作？它可以通过拖动菜单文本区域（菜单图像或某些内部 div）来上下拖动，并且 div 在拖动时向下或向上（具有最大和最小限制）。

我不能让这个代码工作，任何人都可以给出一个实用的代码吗？

whole_menu.onPress = function() {
startDrag(this);
};
whole_menu.onRelease =function () {
stopDrag();
};


whole_menu.onPress = function() {
startDrag(this, false, 0, this._y, 800-this._width, this._y);
};
whole_menu.onRelease =function () {
stopDrag();
};

编辑： 添加了更多解释和代码，因此
无需关闭此问题

Answer 1

（没有 jQuery UI）我构建了这个，应该适用于所有移动设备！（也在移动设备上测试 - Android）

jsBin 演示

var $MB = $('#menu_btn'),
    $M = $('#menu'),
    $DOM = $(document),
    startAtY = 10, // CSS px
    endAtY = 270,  // CSS #menu height px
    clickedAtY,
    clickEventType= document.ontouchstart !== null ? 'mousedown' : 'touchstart',
    moveEventType = document.ontouchmove  !== null ? 'mousemove' : 'touchmove' ,
    endEventType  = document.ontouchend   !== null ? 'mouseup'   : 'touchend'  ;

$MB.on(clickEventType, function( e ) { 

  e.preventDefault();  

  clickedAtY	= e.pageY - $(this).offset().top;
  if(clickEventType === 'touchstart'){
    clickedAtY = e.originalEvent.touches[0].pageY - $(this).offset().top;
  }
  
  $DOM.on(moveEventType, moveHandler)
      .on(endEventType, stopHandler);

});

function moveHandler( e ) {
  var posY = e.pageY - clickedAtY;
  if(moveEventType === 'touchmove') {
    posY = e.originalEvent.touches[0].pageY - clickedAtY;
  }
  posY = Math.min( Math.max(0, posY), endAtY - startAtY);
  $M.css({top: posY});
}

function stopHandler() {
  $DOM.off(moveEventType, moveHandler)
      .off(endEventType,  stopHandler);
}

*{margin:0;padding:0;}

body{font-family:Arial;}

#menu_wrapper{
  height:0px;
}
#menu{
  background:#444;
  height:280px;
  margin-top:-270px;
  color:#ccc;
  position:relative;
}
#menu_btn{
  cursor:pointer;
  background:#444;
  padding:10px 20px;
  position:absolute;
  bottom:-30px;
    left:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="menu_wrapper">
  <div id="menu">

    <div id="menu_btn">DRAG ME DOWN</div>
  </div>
</div>