Question

我正在尝试创建一个React应用，该应用可以拖放图像内的div；获取该div的位置，并生成一个包含CSS的JSON文件，该CSS将准确表示元素在另一个HTML文件中的位置。

到目前为止，我已经取得了成功，但是我似乎陷入了onDrop事件期间div不会下降到鼠标所在位置的确切位置的问题。 div将从鼠标的X和Y下降几个像素。我希望将其放在鼠标所在的同一位置。我尝试手动分配随机像素值来计算偏移量，但这并不是我正在寻找的解决方案，因为它可能因设备而异。

此处演示： https://sandbox-385a6.firebaseapp.com/

要使用该应用程序，请选择一个图像，从列表中选择一个容器，然后单击添加。问题是当您尝试在div上拖动时。

OutputContainer.js

class OutputContainer extends Component {
...
    onDrop = (event) => {
    let targetParameters = event.dataTransfer.getData("text");
    targetParameters = targetParameters.split(',')

    let offsetX = event.pageX

    let offsetY = event.pageY

    targetParameters[1] = offsetX
    targetParameters[2] = offsetY

    console.log(targetParameters)

    this.props.repositionXY(targetParameters)
    let id = targetParameters[0]

    if (id === this.state.selectedValue) {
        this.setState({ initialX: offsetX, initialY: offsetY, selectedFontSize: this.getObjectById(id).fontSize })
    } else {
        this.setState({ selectedValue: id }, () => {
            this.setState({ initialX: offsetX, initialY: offsetY, selectedFontSize: this.getObjectById(id).fontSize })
        })
    }
}

    onDragStart = (event) => {
    let id = event.target.id
    event.dataTransfer.setData('text/plain', id + "," + event.pageX + "," + event.pageY);
}

...
render(){
...
            <div
                className={classes.certificateContainer}
                onDragOver={e => this.onDragOver(e)}
                onDrop={e => this.onDrop(e)}
            >

                {this.props.variables.map((variable, index) => {
                    let x = variable.x + "px";
                    let y = variable.y + "px";

                    let styleObj = {
                        zIndex: index + 1,
                        left: x,
                        top: y,
                        color: variable.color,
                        fontFamily: variable.fontFamily,
                        fontSize: variable.fontSize + 'px'
                    }

                    return (
                        <div
                            key={variable.id}
                            ref={ref => (this.refArray[variable.id] = ref)}
                            id={variable.id}
                            draggable
                            className={classes.variableElement}
                            style={styleObj}
                            onDragStart={(e) => this.onDragStart(e)}
                            onClick={this.onDivClick}
                            onDoubleClick={this.onDoubleClick}
                            onKeyDown={this.onKeyDown}
                        >
                            {variable.placeholder}
                        </div>
                    )
                })}

                <img
                    className={classes.certificateImage}
                    ref={this.imageElement}
                    src={this.props.imageSource}
                    alt={"Certificate Preview"}
                    draggable='false'

                />

            </div>    
  }
}

OutputContainer.module.css

.OutputContainer{
    overflow-wrap: break-word;
    word-wrap:break-word;
    width: 100%;
}
.certificateImage{
    z-index: 0;

}

.variableElement{
    position:absolute;
}

.certificateContainer{
    width: auto;
    overflow: hidden; 
    position: relative; 
}

.variableSelect{
    display: flex;
    margin-left: 1%;
    margin-bottom: 1%;
}

.fontTextField{
    margin-left: 5px;
    margin-right: 15px;
}

如果您能向正确的方向推我，那将真的有帮助。谢谢！

如何将鼠标的X和Y匹配到div的上下左右React

0 个答案: