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>
        );
    }

在两个React组件之间拖放

0 个答案: