如何创建可拖动菜单div(桌面和移动) [英] How to create a draggable menu div (desktop and mobile)

问题描述

如何做到以上几点? 可以通过拖动菜单文本区域(菜单图像或某些内部div)来上下拖动，并且拖动时div可以上下(具有最大和最小限制).

How to make the above? It can drag up and down by dragging the menu text area (menu image or some inner div), and the div comes down or up (with max and min limits) as its dragged.

我无法使此代码正常工作，任何人都可以提供实用的代码吗?

I cant make this code working, can any one give a practical code?

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();
};

添加了更多说明和代码，因此
无需关闭此问题

added more explanation and code, so
no need to close this question

推荐答案

(无jQuery UI )我构建了此文件，应在所有移动设备上都可以使用！ (也在移动设备上进行过测试-Android)

(Without jQuery UI) I build this, should work on all mobile devices! (Tested also on mobile - Android)

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>

这篇关于如何创建可拖动菜单div(桌面和移动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！