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

问题描述 投票:0回答:1

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

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

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

reactjs drag-and-drop touch dnd-kit
1个回答
4
投票

快速入门中没有介绍它,但我在 Draggable 部分的 recommendations 中找到了答案:

一般来说,我们建议您将可拖动元素的

touch-action
属性设置为
none
,以防止在移动设备上滚动。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.