如何在我的拖放应用程序中将Dragged元素粘贴到Drop div中？

Question

我正在用React（和Microsoft Fabric UI）创建一个动态表单创建者。

我的页面分为三个部分（框），左侧的框将显示不同的表单字段选项。 您应该可以从左侧的框中将一个字段拖到中间的框中。 我的问题是我已经可以使用Drag而不是Drop了。意思是，我可以从我的左侧框中拖动一个字段，但它不会粘贴到中间框。

我该如何解决？我完全陷入困境，我不知道如何前进。有人可以帮我吗？

谢谢！！ 感谢您的帮助，目前我非常害怕:(

import React, { Component } from 'react';
import { DayPickerStrings } from '../MS UI/Calendar'
import Textfield from '../MS UI/Textfield';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import Button from '../MS UI/Button';
import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui- 
fabric-react/lib/DatePicker';
import { Dropdown, IDropdownOption } from 'office-ui-fabric- 
react/lib/Dropdown';



const ElementType = {
Button: 'Button',
TextBox: 'TextBox',
Calendar: 'Calendar',
Checkbox: 'Checkbox'

};

  class Boxes extends Component {
constructor (){
    super ();

this.state = {
    leftBox: [
        {id: "Button", elementType:ElementType.Button, category:"left" },
        {id: "textfield", elementType:ElementType.TextBox, category:"left" },
        {id: "Calendar", elementType:ElementType.Calendar, category:"left"},
        {id: "Checkbox", elementType:ElementType.Checkbox, category:"left"},
        {id: "  ", category: "middle" }
        /*{name:<Textfield/> , category:"left" },
        {name: <Dropdown/>, category: "left"},
        ,
        {name: "  ", category: "left" }*/
    ],
    middleBox: [],
    rightBox:[],
    dragObjectId: ''
    }
}

onDragStart = (ev, id) => {
    console.log(ev);
    console.log('dragstart:', id);
    ev.dataTransfer.setData("id", id);

    this.setState({
        ...this.state,
        dragObjectId:id
        //Gives element ID by DragStart
    })

};

onDragOver = (ev) => {
    ev.preventDefault();
    // Makes drop-div stick
};

onDrop = (ev, cat) => {

    let id = this.state.dragObjectId
    console.log(id);

    let boxes = this.state.boxes.filter((box) => {
        console.log(box);
        if (box.name === id) {
            box.category = cat;
            console.log(box)

        }

        return box;
        //This return an updated array of boxes
    });

    this.setState({
        ...this.state,
        boxes        ,
        dragObjectId:''

        // Empties the ID that was given by DragStart
    })
};

 GetRenderForObject(object){
    if(object.elementType == ElementType.Button){
        return (
            <div
                 onDragStart={(e) => this.onDragStart(e)}
                 draggable>
            <Button id={object.id} key={object.id} />
            </div>
        )
    } else if (object.elementType == ElementType.Calendar){
        return (
            <div
                onDragStart={(e) => this.onDragStart(e)}
                draggable>
                <DatePicker id={object.id} key={object.id}
                // firstDayOfWeek={ firstDayOfWeek}
                strings={DayPickerStrings}
                placeholder="Select a date..."
                ariaLabel="Select a date..."
                onAfterMenuDismiss={() => console.log('onAfterMenuDismiss called')}/>
            </div>
        );
     }
     else if (object.elementType == ElementType.TextBox){
        return (

            <div onDragStart={(e) => this.onDragStart(e)}
                 draggable>
                <Textfield id={object.id} key={object.id}/>
            </div>

        );
    } else {
         return (
             <Checkbox
             label="Checkbox"
             />
         );
    }

}

render() {


    const leftBoxContent= this.state.leftBox.map((object, index) => {
       return this.GetRenderForObject(object);
    });

    const middleBoxContent = this.state.middleBox.map((object, index) => {
        return this.GetRenderForObject(object);
    });

    const rightBoxButtons = this.state.leftBox.map((object, index) => {
        return this.GetRenderForObject(object);
    });

    const sLeft = {
        borderRight: '1px solid #eee',

    };
    const margin = {

        marginTop: '5px',
        height: '500px',
    };


    return (

        <div className="ms-Grid" dir="ltr">
            <div className="ms-Grid-row">

                <div className="ms-Grid-col ms-sm12 ms-md-4 ms-lg4"
                style={sLeft}>
                <div  onDragOver={(e) => this.onDragOver(e)}
                onDrop={(e) => {this.onDrop(e, "left")}} style={margin} >
                    {leftBoxContent}
                    {/*<Button id="MyButton1"
                              onDragOver={(e) => this.onDragOver(e)}
                              onDrop={(e) => {this.onDrop(e, "left")}}*/}
                </div>
                </div>

                <div className="ms-Grid-col ms-sm12 ms-md-4 ms-lg4"
                style={sLeft}>
                <div  onDragOver={(e) => this.onDragOver(e)}
                onDrop={(e) => this.onDrop(e, "middle")} style= 
 {margin}>
                    {/* Makes drop-div stick */}
                    {middleBoxContent}
                    <div>  </div>

                </div>
                </div>

                <div className="ms-Grid-col ms-sm12 ms-md-4 ms-lg4">

                   // HoverCard - Settings //
                </div>

            </div>

        </div>



    );
}
}

export default Boxes;