将个人资料图片拖到 div 中，但在移动设备中不起作用

Question

我使用了 codepen 参考 https://codepen.io/dsalvagni/pen/BLapab 来拖动个人资料图像。但它不适用于移动设备。在移动设备中出现此错误“[干预] 由于目标被视为被动，无法阻止被动事件侦听器中的默认值。请参阅“。我尝试添加第三个参数 passive:false。但是没有用。谁能帮帮我。提前致谢！在下面添加我尝试更改的代码片段，以便它可以在移动设备上运行。

    $(window).on("mousemove touchmove", function (e) {
    e.preventDefault();
    if ($dragging) {
      var refresh = false;
      clientX = e.clientX;
      clientY = e.clientY;
      if (e.touches) {
        clientX = e.touches[0].clientX;
        clientY = e.touches[0].clientY;
       }

      var dy = clientY - y;
      var dx = clientX - x;
      dx = Math.min(dx, 0);
      dy = Math.min(dy, 0);
      /**
       * Limit the area to drag horizontally
       */
      if (self.model.width + dx >= self.model.cropWidth) {
        self.model.x = dx;
        refresh = true;
      }
      if (self.model.height + dy >= self.model.cropHeight) {
        self.model.y = dy;
        refresh = true;
      }
      if (refresh) {
        render();
      }
    }
  },{ passive: false });

Answer 1

现在我明白了你的问题；拖动个人资料图片。您的意思是将其平移。

因此jQuery 无法添加对被动侦听器的支持。解决方法是使用本机 addEventListener。为了支持多个事件，我只添加带有事件名称的数组，然后使用 forEach() 来运行这两个事件。

['mousemove', 'touchmove'].forEach(evt =>
    window.addEventListener(evt, function(e) {}, {
      passive: false
    })

这将消除错误，但是，由于您的参考在 dragStart() 函数中，因此还需要更改代码。 JQuery修改了原始事件，并将其存储在e.originalEvent中。如果你只用e.touches，e里面没有这个对象，你得往里面找e.originalEvent

Here 是对您的参考代码进行修改后的完整示例，因为 SO 不能添加超过 3000 个字符

将个人资料图片拖到 div 中，但在移动设备中不起作用

Drag a profile image inside a div but it does not work in mobile

javascript

jquery

drag-and-drop

html5-canvas

drag