2

ここに画像の説明を入力

上記の作り方は？メニューテキスト領域 (メニュー画像または内部の 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();
};

編集： 説明とコードを追加したため、
この質問を閉じる必要はありません

4

1 に答える 1

7

( 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>

于 2013-01-06T22:53:13.117 に答える