Перетаскивание изображения на мобильный

Question

Я построил быстрый блок, который позволяет кому-то увеличивать изображение, а затем перетаскивать (панорамирование и масштабирование).

Для этого я использовал panzoom:

jQuery(document).ready(function( $ ) {

  $("#panzoom").panzoom({
    $zoomRange: $(".zoom-range"),
    $reset: $(".reset"),
    contain: 'invert',
  });

});

.wrap{
  position: relative;
  background: black;
  padding: 60px 20px;
  height: 600px;
}
.wrap .padding, section{
  height: 100%;
}

.wrap .buttons {
  position: absolute;
  z-index:1;
  top: 0;
  right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>

<div class="wrap">
  
  <div class="padding">
  
    <section>
      <div id="panzoom" style="text-align: center">
          <img src="https://i.imgur.com/KhWo66L.png" width="100%">
      </div>
    </section>

    <section class="buttons">
      <button class="reset">Reset</button>
      <input type="range" class="zoom-range">
    </section>
    
  </div>
  
</div>

Вышеописанное прекрасно работает на рабочем столе. Но на мобильном устройстве, поскольку пользователь использует экран для прокрутки, при попытке перетаскивания изображения оно «заикается».

Сложно объяснить, лучше всего продемонстрировать на реальном устройстве.

Любые идеи о том, что проблема здесь?

Answer 1

Используйте эту библиотеку , она более стабильна

// just grab a DOM element
const element = document.querySelector('.wrap');

// And pass it to panzoom
panzoom(element);

.wrap{
  position: relative;
  background: black;
  padding: 60px 20px;
  height: 600px;
}
.wrap .padding, section{
  height: 100%;
}

.wrap .buttons {
  position: absolute;
  z-index:1;
  top: 0;
  right:0;
}

<script src='https://unpkg.com/panzoom@8.7.3/dist/panzoom.min.js'></script>

<div class="wrap">
  
  <div class="padding">
  
    <section>
      <div id="panzoom" style="text-align: center">
          <img src="https://i.imgur.com/KhWo66L.png" width="100%">
      </div>
    </section>

    <section class="buttons">
      <button class="reset">Reset</button>
      <input type="range" class="zoom-range">
    </section>
    
  </div>
  
</div>