Javascript 在两个组件之间拖放

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

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

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

我尝试将

onDrop

函数“drop（）”从组件A复制到组件B，但没有成功

也许我需要一个像“react Beauty 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;

import React，{Component}来自“React”；
类调色板扩展组件{
dragStartHandler=事件=>{
event.dataTransfer.setData（“text/plain”，event.target.id）；//返回未定义的？？
console.log（事件）；
};
dragendHandler=event=>{}；
dragEndHandler=事件=>{
console.log（“结束拖动”）；
};
dragStart=事件=>{
event.dataTransfer.setData（“text”，event.target.id）；
log（“拖动启动”）；
};
drop=事件=>{
if（event.target.id）{
event.dataTransfer.getData（“文本”）；
event.dataTransfer.clearData（）；
}
};
render（）{
返回(
你的调色板

event.preventDefault（）}
onDragEnd={this.dragEndHandler}
>
标题

第二部分我想删除

);
}
}
导出默认调色板；

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

类调色板扩展组件{
fireCreateComponent=（elementType）=>{
createComponent（elementType）；
}
render（）{
返回(
你的调色板


可拖动收割台


拖拉式标题


可拖动文本区

//依此类推，在画布部分创建不同的组件

);
}

画布：

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

类画布扩展组件{
createComponent=（componentType，props）=>{
React.createElement（）
render（）{
返回(
将元素拖到这里

空位1
{" "}
空位2
{" "}

);
}

嘿，你试过这个吗：[拖放]（）？我会去看看的！谢谢。我一直在抵制去图书馆——固执地说，我喜欢使用普通的HTML5和javascript当涉及到拖放它更好的u-use图书馆时，它不像你想的那么简单，在普通的javascript或jquery中，我们使用JquerryUI，它很完美，jquery选项与react一起工作吗？jquery与react一起工作，但不去在这个方向上，react dnd是处理react JS中拖放功能的完美库