Touch 用户无法在 React 应用程序中拖放

Question

我遵循了dnd kit React 库的快速入门，它让我可以用鼠标很好地拖放。但是，当我尝试在 Android 上使用 Chrome 的同一页面时，我无法拖动该项目。看起来它开始移动，然后当我的手指移出其原始边界时就被卡住了。

我尝试切换到拖动叠加，但这似乎没有任何区别。

如何使用 dnd 套件支持触摸用户？

Answer 1

快速入门中没有介绍它，但我在 Draggable 部分的建议中找到了答案：

一般来说，我们建议您将可拖动元素的touch-action属性设置为none，以防止在移动设备上滚动。

我发现我可以在可拖动元素本身上设置 CSS 样式，也可以在包含多个可拖动元素的父元素上设置 CSS 样式。

然而，当我开始尝试在项目列表或网格中拖动项目时，它停止工作。最终，我不得不从使用指针传感器切换到使用鼠标和触摸传感器，如传感器部分所述。