如何在react中对动态div进行拖放？

Question

基本上，我要做的是使动态div通过在drop事件期间映射可拖动对象并更改位置来生成。我尝试的是在drop事件中通过其id更改div的CSS。

我的想法是，在dragStart上分别在dataTransfer和onDrop上设置div ID，clientX和clientY，它将根据鼠标放置的位置移动元素它。

它移动了，但不是我所期望的。

以下代码：

import React, { Component } from 'react';
import uuid from 'uuid'

class OutputContainer extends Component {

    state = {
        selectValue: "Variable List",
        propVariableArray: [],
        imageBoundary: {}
    }

    componentWillReceiveProps(updatedProps) {
        this.setState({ propVariableArray: updatedProps.variables })
    }

    componentDidMount() {
        this.setState({ imageBoundary: this.refs.image.getBoundingClientRect() });
    }

    onDrop = (event) => {
        event.persist();
        var targetParameters = event.dataTransfer.getData("text");

        targetParameters = targetParameters.split(',')

        let div = document.getElementById(targetParameters[0]);// probably not a good way 
        this.props.repositionXY(targetParameters)

        div.style.left = (parseInt(targetParameters[1]) + event.clientX) + 'px';
        div.style.top = (parseInt(targetParameters[2]) + event.clientY) + 'px';
    }
    onDragOver = (event) => {
        event.preventDefault();
    }

    onDrag = (event) => {
        event.dataTransfer.setData('text/plain', event.target.id + "," + event.clientX + "," + event.clientY);
    }

    render() {
        return (
            <div style={{ position: "absolute" }}>
                <div>
                    <select defaultValue={"Variable List"} onChange={e => this.setState({ selectValue: e.target.value })}>
                        <option disabled>{"Variable List"}</option>
                        {
                            this.state.propVariableArray.map(variable => {
                                return (
                                    <option key={uuid.v4()} >{variable.placeholder}</option>
                                )
                            })
                        }
                    </select>
                </div>

                <div
                    style={{ position: "absolute", zIndex: 0 }}
                    onDragOver={e => this.onDragOver(e)}
                    onDrop={e => this.onDrop(e)}
                >
                    {this.props.variables.map((variable, index) => {
                        return (

                            <div
                                key={uuid.v4()}
                                id={variable.id}
                                draggable
                                style={{ display: "block", marginRight: "1em", zIndex: index + 1, position: "absolute", left: variable.XY[0], top: variable.XY[1] }}
                                onDragStart={(e) => this.onDrag(e)}
                            >
                                {variable.placeholder}
                            </div>
                        )
                    })}
                    <img ref={'image'} src={this.props.imageSource} alt={"Certificate Preview"} style={{ position: "absolute" }} draggable='false' />
                </div>
            </div>
        )
    }
}

export default OutputContainer;

感谢您的帮助。谢谢！