移动触摸事件的 draggable: true/false 等效于什么？

Question

我有一个用 JavaScript 构建的拖放游戏。一旦一个元素被拖到某个区域，我不希望用户能够拿起它再次拖动它。可拖动元素是具有 draggable: true 属性和一些绝对值 x-y 位置的图像，如下所示：

<img draggable="true" src="images/galleon.svg" style="position: absolute; left: 400px; top: 500px; />

拖动后（在 drop 桌面事件和 touchend 移动事件上），如果新的 x 坐标（左属性）大于“600” ，我使用 JavaScript 将图像的 draggable 属性更改为 false:

function moveDrop(e)
  image = e.target;
  if (
    image.style.left > "600") {
    image.setAttribute("draggable", "false");
  }

这在桌面上效果很好。一旦我将图像放在超过 600 像素标记的任何位置，我就无法再次单击和拖动它。

但是，它不适用于移动设备。我仍然可以再次触摸并拖动图像，即使它的新 x 坐标大于 600。是否有一个我可以添加到上面代码的单行代码，它会使图像对未来的触摸事件“无响应”，类似于 draggable: false?

我尝试向 touchstart 事件添加一个“if”语句，希望 touchstart 和 touchmove 函数仅在左值较小时才会运行超过 600。但是，这使得我可以将图像拖动到 600，然后它根本不会让我继续拖动超过 600（如果用户愿意，他们应该能够拖动到 900）。

如有必要，我可以提供完整的代码，但我希望我可以将一个简单的修复程序添加到 touchend 函数中，以防止将来在移动设备上拖拽。

Answer 1

想通了。如果我将 CSS 样式 pointer-events: none; 添加到我的 touchend 函数中，我就能够阻止元素上的未来触摸事件，如下所示：

function moveDrop(e)
  image = e.target;
  if (
    image.style.left > "600") {
    image.style.pointerEvents = "none";
  }

What is the equivalent of draggable: true/false for mobile touch events?