使用[dnd-multi-backend]或[TouchBackend] + [HTML5Backend] + [Modernizr]为触摸屏自定义拖动预览？

Question

在dnd-multi-backend库中，有这样的文字说明：

由于触摸设备当前不支持原生Drag-n-Drop。需要自定义DragPreview。查看示例实例。

但是到示例的链接不起作用。有人在拖动触摸设备上的元素时有一个如何添加“幽灵”预览的示例吗？

附：在笔记本电脑预览工作。 HTML5toTouch中的预览选项设置为true。

1）在笔记本电脑和触摸设备上使用dnd-multi-backend dnd但在触摸设备上无法预览时：

import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
import TouchBackend from 'react-dnd-touch-backend';
import HTML5Backend from 'react-dnd-html5-backend';

    const HTML5toTouch = {
  backends: [
    {
      backend: HTML5Backend,
    },
    {
      backend: TouchBackend({
        enableMouseEvents: true,
        enableTouchEvents: true,
        touchSlop: 20,
      }), // Note that you can call your backends with options
      preview: true,
      transition: TouchTransition,
    },
  ],
};

export default DragDropContext(MultiBackend(HTML5toTouch))(MyPage);

2）使用[TouchBackend] + [HTML5Backend] + [Modernizr]时：使用此类代码拖放触摸设备不起作用：

export default DragDropContext(
  Modernizr.touchevents ? TouchBackend : HTML5Backend,
)(MyPage);

3）我尝试添加预览，但拖动时不跟踪：

import MultiBackend, {
  TouchTransition,
  Preview,
} from 'react-dnd-multi-backend';

  const generatePreview = (object) => (
        <div style={{ backgroundColor: 'red' }}>Generated</div>
      );
<Preview generator={generatePreview} />

Answer 1

一定要在生成的<div>中包含样式道具。如果不这样做，您的预览将不会在页面上移动。它包括在拖动项目时更新的样式内容。

所以你的代码将更新为：

const generatePreview = (type, item, style) => (
       return <div style={style}>Generated</div>;
  );
<Preview generator={generatePreview} />

我在回购中提到了一些文件：preview/examples/App.js和react-dnd-preview/src/index.js