javascript - 在两个 React 组件之间拖放

Question

我正在尝试创建一个 React 应用程序，我可以在其中将 DOM 元素从可用 DOM 元素的“调色板”拖放到第二个组件中的空白“画布”区域中。可用元素显示为 React 组件的无序列表，用户可以使用它来构建自定义网站。（我基本上是在尝试复制 Wix。）

我只是在学习，所以我在大量复制——我不太了解 HTML5 Drag N Drop 的局限性。也许它在 React 组件之间根本不起作用。

如果我试图从组件 A 拖放到组件 A 中，那将很容易—— HTML5 可以做到这一点，而且我已经阅读过它。但我不知道如何使其适应从组件 A 拖放到组件 B 中。

我尝试将onDrop函数“drop()”从组件 A 复制到组件 B，但没有成功。

也许我需要一个像“react-beautiful-dnd”这样的库来完成这个？

这是我的代码：

组分 A：

import React, { Component } from "react";

class Palette extends Component {
    dragStartHandler = event => {
        event.dataTransfer.setData("text/plain", event.target.id); // returns undefined ??
        console.log(event);
    };

    dragendHandler = event => {};

    dragEndHandler = event => {
        console.log("Ended drag");
    };

    dragStart = event => {
        event.dataTransfer.setData("text", event.target.id);
        console.log("Drag started");
    };

    drop = event => {
        if (event.target.id) {
            event.dataTransfer.getData("text");
            event.dataTransfer.clearData();
        }
    };

    render() {
        return (
            <div className="palette-container">
                <h3>Your Palette</h3>
                <ul>
                    <li
                        id="header"
                        draggable="true"
                        onDrop={this.drop}
                        onDragStart={this.dragStartHandler}
                        onDragOver={event => event.preventDefault()}
                        onDragEnd={this.dragEndHandler}
                    >
                        Header
                    </li>
                    <li>Second component I wish to drop</li>

                </ul>
            </div>
        );
    }
}

export default Palette;

组件 B 看起来与组件 A 差不多（因为我不知道还要写什么）。

这是我想象的一个功能齐全的示例将涉及的内容。调色板组件中的某些内容允许画布组件知道何时创建新的 DOM 元素。

调色板：

class Palette extends Component {
    fireCreateComponent = (elementType) => {
        createComponent(elementType);
    }

render() {
        return (
            <div className="palette-container">
                <h3>Your Palette</h3>
                <ul>
                    <li
                        id="header"
                        draggable="true"
                        onDragStart={this.fireCreateComponent()}
                    >
                        Draggable Header
                    </li>
                    <li
                        id="headline"
                        draggable="true"
                        onDragStart={this.fireCreateComponent()}
                    >
                        Draggable Headline
                    </li>
                    <li
                        id="text-area"
                        draggable="true"
                        onDragStart={this.fireCreateComponent()}
                    >
                        Draggable Text Area
                    </li>
                    // and so on to create different components in the Canvas section
                </ul>
            </div>
        );
    }

帆布：

class Canvas extends Component {
    createComponent = (componentType, props) => {
        React.createElement(<componentType props={props}/>)

render() {
        return (
            <div className="canvas-container">
                <h3>Drag Elements Here</h3>
                <div className="canvas">
                    <ul>
                        <li>Empty Space 1</li>
                        <div
                            onDrop={this.createComponent}
                        >
                            {" "}
                        </div>
                        <li>Empty Space 2</li>
                        <div
                            onDrop={this.createComponent}
                        >
                            {" "}
                        </div>
                    </ul>
                </div>
            </div>
        );
    }

标签： javascripthtmlreactjs