React Js 的拖放库在移动平台上不起作用

Question

我的 React-js 项目支持多个平台 Web、桌面、移动，并具有使用拖放（DND）库的功能。然而，拖放（DND）功能从未针对移动平台开发。

现在，我们还需要在移动平台上支持免打扰功能。

对于拖放，我使用以下 npm 包：

1. 反应-dnd
2. 反应-dnd-html5-后端

为了支持移动平台，我使用 react-dnd-touch-backend库

问题：在移动平台上，项目被拖动时变得不可见。请看下面的 gif。

我已经按照下面的博客一步步进行操作，并访问了其他几个博客，但都有同样的问题。 https://medium.com/litslink/react-dnd-in-examples-ce509b25839d

如果我使用react-beautiful-dnd，那么一切工作正常，并且该项目在拖动过程中可见，但我不能使用除react-dnd之外的任何其他库，因为它已经在项目中使用，并且没有用于同一工作的多个库一种理想的方法。

不使用react-beautiful-dnd的另一个原因是Atlassian公司已将该库置于生命周期终止模式，并且所有功能改进都已停止。

请帮我解决在 React-dnd 库中拖动过程中看不见的项目问题，或者让我知道我是否遗漏了某些内容。

Answer 1

第二种方法对我有用......

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { TouchBackend } from 'react-dnd-touch-backend';

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const Backend = isMobile ? TouchBackend : HTML5Backend; 



<DndProvider backend={Backend}>  
{/*all codes*/}
  </DndProvider>

或者

import { DndProvider } from 'react-dnd';
import { TouchBackend } from 'react-dnd-touch-backend';

 <DndProvider
backend={TouchBackend}
options={{ enableMouseEvents: true }}

{/*all codes*/}
  </DndProvider>