JQuery Draggable: перемещение контейнера по горизонтали + перемещение документа по вертикали - PullRequest
Новая
       29

JQuery Draggable: перемещение контейнера по горизонтали + перемещение документа по вертикали

0 голосов
/ 13 ноября 2018

Я создаю перетаскиваемый контент на мобильных устройствах с использованием jQueryUI.

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

Я также хотел бы, чтобы пользователь мог перетаскивать вертикально, чтобы весь документ прокручивался вверх и выполнялся, следуя жесту пользователя. Я пытаюсь использовать $ ('body'). ScrollTop () безуспешно: перетаскивает горизонтально в правильном направлении, вообще не двигается вертикально.

Не могли бы вы мне помочь?

Код ручка здесь: https://codepen.io/MaxAurray/pen/Krawxj

HTML: 

<html>
  <head></head>
  <body>
    <!-- DEBUG FRAME -->
    <div class="debug">
      <div class="body"></div>
      <div class="drag"></div>
    </div>
    <!-- DUMMY CONTENT -->
    <div class="content">Dummy content</div>
    <!-- INTERESTING PART -->
    <div class="container">
      <h2>Beautiful images</h2>
      <h3>(drag left and right)</h3>
      <div class="draggable">
        <div class="card">
          <img src="https://picsum.photos/200/150/?random1">
          <h3>Image 1</h3>
        </div>
        <div class="card">
          <img src="https://picsum.photos/200/150/?random2">
          <h3>Image 2</h3>
        </div>
        <div class="card">
          <img src="https://picsum.photos/200/150/?random3">
          <h3>Image 3</h3>
        </div>
        <div class="card">
          <img src="https://picsum.photos/200/150/?random4">
          <h3>Image 4</h3>
        </div>
      </div>
    </div>
        <!-- DUMMY CONTENT -->
    <div class="content">Dummy content</div>
  </body>
</html>

CSS: 

body {
  margin: 50px;
}

.debug {
  position:fixed;
  top:0;
  right:0;
  width:200px;
  height:100px;
  border:1px blue dashed;
}

.content {
  display:flex;
  justify-content: center;
  align-items:center;
  background-color:rgba(0,0,0,0.2);
  width:500px;
  height:300px;
  font-style: italic;
}
.container {
  width:500px;
  background-color:rgba(255,0,0,0.2);
  overflow-x:hidden;
  h2,h3 {
    text-align:center;
  }
  .draggable {
    background-color:rgba(0,255,0,0.2);
    padding:20px 0;
    display: flex;
    width:(66% * 4);
    justify-content: space-between;
    .card { 
      width: 100%;
      border:1px rgba(0,0,255,0.2) dashed;
      background-color:rgba(0,0,255,0.2);
      text-align:center;
      img {
        width:200px;
        height:150px;
      }
    }
  }
}

JavaScript: 

/*
This code pen imports:
- jQuery, 
- jQuery UI, 
- jQueryUI-Touch-Punch
*/

$(document).ready(function() {
  $(".draggable").draggable({
    // Save body position at drag begin
    start: function(event, ui) {
      $("body").data("top", $("body").scrollTop());
    },

    drag: function(event, ui) {
      // Debug display
      $(".debug .body").text("BODY - ScrollTop: " + (parseInt($("body").data("top")) - ui.position.top));

      $(".debug .drag").text(
        "DRAG - Top:" + ui.position.top + " / Left: " + ui.position.left
      );

      // Move body vertically, relative to drag position
      $("body").scrollTop(parseInt($("body").data("top")) - ui.position.top);

      // Get card width
      var intDivLength = $(this)
        .find("div:first-child")
        .outerWidth();

      // Do not allow to go left after first image
      if (ui.position.left > 0) {
        ui.position.left = 0;
      } else if (
        // Do not allow to go right after last image
        ui.position.left <
        -4 * intDivLength +
          $(this)
            .closest(".container")
            .innerWidth()
      ) {
        ui.position.left =
          -4 * intDivLength +
          $(this)
            .closest(".container")
            .innerWidth();
      }

      // Force move on x axys.
      ui.position.top = 0;
    },
    scroll: false
  });
});
...