jQuery смахивающий нижний лист - PullRequest
Новая
       11

jQuery смахивающий нижний лист

0 голосов
/ 21 сентября 2018

Я пытаюсь создать аналогичную функциональность, которая доступна в Material.io для нижнего листа, но с использованием jQuery.

Я нашел что-то похожее, написанное для React, с хорошим изображением, которое можно объяснить. React Swipeable Bottom Sheet

Я начал с нескольких сенсорных модулей jQuery, но обнаружил, что @ roko-c-buljan имеет отличный стартовый подход с использованием чистого jQuery ( Как создать перетаскиваемый элемент меню (рабочий стол и мобильный телефон) ).

Я пытаюсь использовать этот пример в качестве отправной точки для работы вместо bottom сверху, при этом он также изящно привязан - как на изображении React, но на двух разных уровнях : 200 пикселей снизу, а также привязан вверху - с теми же эффектами перехода для продолжения перемещения кследующая точка отсчета в том же направлении.

Я в основном ищу дизайн Material.io для нижних листов, используя jQuery с сенсорными возможностями.

После преодоления многих препятствий, я в данный момент в коде и надеюсь, что этогораздо ближе, чем я думаю.

Обратите внимание, этот код запускается только при использовании сенсорного режима в вашем браузере 

$(document).ready(function () {
      
      var $MB = $('#menu_btn'),
          $M = $('#menu'),
          bheight = $(".container-fluid").height(),
          startBottom,
          startAtY = 10,
          endAtY = bheight-10,
          clickedAtY,
          clickEventType = document.ontouchstart !== null ? 'mousedown' : 'touchstart',
          moveEventType  = document.ontouchmove  !== null ? 'mousemove' : 'touchmove' ,
          endEventType   = document.ontouchend   !== null ? 'mouseup'   : 'touchend'  ;
      
      startBottom = -1 * bheight + 100;
      $M.css("bottom",startBottom);
      $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;
        }
        $MB.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() {
        $MB.off(moveEventType, moveHandler)
            .off(endEventType,  stopHandler);
      }

    });
html, body {
      height: 100%;
    }
    body {
      overflow-x: hidden;
    }
    #main {
      background-color: rgb(112, 112, 112);
    }
    #header-section {
      height: 40px;
      background-color: rgb(78, 78, 78);
    }
    #menu_btn {
      background-color: green;
    }
    #menu {
      position: fixed;
      left: 10px;
      width: 95% !important;
      height: 90%;
      z-index: 900;
      background-color: rgb(120, 110, 163);
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Swipeable Bottom Sheet</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid d-flex h-100 flex-column p-0">
    <!-- header -->
    <div id="header-section" class="d-flex">
      Header Section
    </div>
    <!-- Content -->
    <div id="main-section" class="d-flex flex-fill">
      
      <!-- bottom sheet -->
      <div id="menu">
        <div id="menu_btn">
          SWIPE AREA
        </div>
        <div>
          bottom sheet content
        </div>
      </div>

      <!-- main -->
      <div id="main" class="flex-grow-1">
        Main Content
      </div>
    </div>

  </div>

  <!-- SCRIPTS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  
</body>

</html>
...