Как оживить перетаскивание и продолжить скольжение? - PullRequest
Новая
       15

Как оживить перетаскивание и продолжить скольжение?

0 голосов
/ 19 апреля 2019

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

Навигация построена с помощью перетаскиваемого пользовательского интерфейса jquery, и ее элементы навигации содержатся в div и выровнены.вдоль оси х.

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

Как я могу анимировать перетаскивание после отбрасывания элемента? 

var nav = $('nav');

nav.draggable({
  axis: "x",
  containment: 'draggable',
  distance: 10
});

navWidth = 0;
$('nav a').each(function(index) {
  navWidth += parseInt($(this).width(), 10) - 20;
});

nav.on("drag", function(event, ui) {
  if (ui.offset.left > 0) {
    ui.position.left = 0;
  }

  if (ui.position.left < navWidth - nav[0].scrollWidth) {
    ui.position.left = navWidth - nav[0].scrollWidth - 5;
  }
});
nav {
  display: flex;
  flex-direction: row
}
nav div {
  height: 32px;
  padding: 0 10px
}
.draggable {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
 border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="draggable">
  <nav class="ui-draggable ui-draggable-handle" style="position: relative;">

    <div class="selected">
      <a href="/test/" id="nav_test" class="selected ui-link" data-ajax="false">test</a>
    </div>
    <div class="">
      <a href="/second/" id="nav_second" class="ui-link" data-ajax="false">second</a>
    </div>
        <div class="">
      <a href="/third/" id="nav_second" class="ui-link" data-ajax="false">third</a>
    </div>

  </nav>
</div>
...