什么是可拖动的等价物：移动触摸事件的真/假？答案

【问题标题】：What is the equivalent of draggable: true/false for mobile touch events?什么是可拖动的等价物：移动触摸事件的真/假？
【发布时间】：2021-05-24 00:44:42
【问题描述】：

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

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

拖拽后（桌面的drop事件，移动设备的touchend事件），如果新的x坐标（左属性）大于“600”，我用JavaScript改变图像的@987654325 @属性到false：

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

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

但是，它不适用于移动设备。即使图像的新 x 坐标大于 600，我仍然可以再次触摸和拖动图像。是否可以在上面的代码中添加一条线，使图像对未来的触摸事件“无响应”，类似于 @ 987654328@?

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：