javascript - interact.js 1.2.4 拖动和手势 Action 混淆

Question

我有 interact.js 1.2.4 和 iPad Retina iOS 8.1 Mobile Safari 的问题，我需要以某种方式解决。问题出现在嵌套在大型顺序学习 Web 应用程序中的排序组件中，用户在其中解决一系列任务。 interact.js 插件用于添加拖放行为，以便用户可以按正确顺序对元素进行排序。该站点已上线，但我要描述的问题现在是持久性的且可重现的，因此需要快速解决。

这是设置。我们用

初始化了许多可拖动元素

interact('.drag').draggable(...);

并且我们已经注册了 onstart、onmove 和 onend 监听器，这些监听器是通过回调函数手动处理的。

在大多数情况下，拖放行为会按计划进行。但是当在应用程序序列的某些部分使用排序组件时，交互的 actionName 莫名其妙地是“手势”而不是“拖动”，这使得 validateAction (interact.js) 函数返回 null 而不是有效操作。这反过来又会导致 pointerDown (interact.js) 处理程序永远不会被触发，因此拖动 Action 永远不会启动，并且元素永远保持不动，从而无法在序列中进一步前进。该行为仅发生在 iPad 上。如果我在 iPad 模拟器中运行该站点并使用 Safari 的开发人员工具十字准线功能检查该元素，则元素发生了一些变化，并且下一个交互的 actionName 突然变为“拖动”，因此该组件开始按预期工作并且用户可以继续顺序。

你有什么想法:

1. 是什么导致网站传递“手势” Action 而不是“拖动” Action ？
2. 当我使用检查十字准线时到底发生了什么？为什么它会改变行为？
3. 我该如何解决这个问题？

可以看到组件代码here ，但它是主要 Backbone 解决方案的一部分，所以这就是我能包含的全部内容。

提前致谢。

Answer 1

我们仍然不知道原因，但似乎 iOS 中存在一个错误，导致应用程序同时触发 5 个指针事件。因此，插件将事件注册为手势，并且拖放功能失败。插件创建者给出了这个解决问题的建议:

interact(document).on('down', function (event) {
  var interaction = event.interaction;
  var canGesture = interaction.target && interaction.target.options.gesture.enabled;
  var maxAllowedPointers = canGesture? 2 : 1;

  while (interaction.pointers.length > maxAllowedPointers) {
      interaction.removePointer(interaction.pointers[0]);
  }
})