如何在React中实现一个简单的拖放模式组件

Question

所有

我是React.js的新手，我想要实现的是拖放组件（让我们称之为DDCom）：

DDCom可以拖动（但不能移动原始的，更像是克隆和克隆移动鼠标），并且该克隆只能放到其他DDCom区域（当拖动开始时，每个DDCom将显示一个突出显示背景区域到表示下降区域）

我真的不知道如何在React.js中实现它，任何人都可以为此提供任何代码示例（或者有关如何使用FLUX模式构建此代码的一些解释）？大多数帖子都指向React DnD，但它看起来很大而且难以理解，我想要的是一个简单明了的实现工作流程。

由于

Answer 1

您可能会发现https://github.com/Khan/react-components/tree/master/examples有用，在反应组件/示例中有一个拖放示例。 或http://react.rocks/tag/Drag_Drop 还看了React DnD，但我同意很难绕过它。

Answer 2

使用Dargula。 它简单明了，并有一个反应包装，react-dragula

Answer 3

我认为使用https://github.com/peterh32/react-drag-drop-container

非常容易

<DragDropContainer targetKey="DDCom" >
    <div>Drag Me!</div>
</DragDropContainer>

<DropTarget targetKey="DDCom" >
    <p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>

如果将dragClone={true}放在DragDropContainer中，它将按照您的描述拖动副本。

然后在DropTarget中添加一个onHit事件处理程序，以将项目放在其上时执行所需的操作。

也可以在鼠标和触摸屏上使用。

Answer 4

我使用了react dropzone软件包-https://github.com/react-dropzone/react-dropzone。甚至还支持材料ui。