手机上的图像拖动故障答案

【问题标题】：Image drag glitchy on mobile手机上的图像拖动故障
【发布时间】：2020-01-07 15:15:48
【问题描述】：

我构建了一个快速块，允许某人放大图像然后拖动（平移和缩放）。

为此，我使用了 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>

以上在桌面上运行良好。但在移动设备上，由于用户使用屏幕进行滚动，因此当试图拖动图像时，它会“卡顿”。

很难解释，最好在实际设备上演示。

对这里的问题有什么想法吗？

【问题讨论】：

什么是移动设备，图片的字节数是多少？您的 HTML 没有给出图像的尺寸，所以它必须是图像中的任何内容，图像有多大？
你能放个视频或gif吗？

标签： javascript jquery html css

【解决方案1】：

改用这个library，它更稳定

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

【讨论】：