Javascript 向下滚动时，无法将拖动的div拖放到图像部分

向下滚动大图像时，可拖动div不会下降到正确的位置。我使用XY坐标来调整可拖动div的左和上css属性，但它不适用于有溢出的图像

我已尝试调整图像的大小，使其在较大时不会溢出。这是可行的，但不是我正在寻找的解决方案

class OutputContainer extends Component {

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

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

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

    targetParameters = targetParameters.split(',')
    console.log(event.clientX + " " + event.clientY)
    targetParameters[1] = event.clientX - 75 // 75 is a random number to offset the difference between the drop position and the mouse position when dropped
    targetParameters[2] = event.clientY - 75 // 75 is a random number to offset the difference between the drop position and the mouse position when dropped
    this.props.repositionXY(targetParameters)
}

onDragOver = (event) => {
    event.preventDefault();
    console.log(event.clientX + " " + event.clientY)
}

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

}

onSelectChange = event => {
    this.setState({ selectValue: event.target.value })
}

render() {
    return (
        <div style={{ position: 'absolute' }} >
            <div className={classes.variableSelect}>
                <select defaultValue={"Variable List"} onChange={event => this.onSelectChange(event)}>
                    <option disabled>{"Variable List"}</option>
                    {
                        this.state.propVariableArray.map(variable => {
                            return (
                                <option key={uuid.v4()} >{variable.placeholder}</option>
                            )
                        })
                    }
                </select>
            </div>

            <div
                className={classes.certificateContainer}
                onDragOver={e => this.onDragOver(e)}
                onDrop={e => this.onDrop(e)}
            >
                {this.props.variables.map((variable, index) => {
                    console.log(variable.x + " " + variable.y)
                    let x = variable.x + "px";
                    let y = variable.y + "px";
                    return (
                        <div
                            key={uuid.v4()}
                            id={variable.id}
                            draggable
                            className={classes.variableElement}
                            style={{ zIndex: index + 1, left: x, top: y, }}
                            onDragStart={(e) => this.onDragStart(e)}
                        >
                            {variable.placeholder}
                        </div>
                    )
                })}
                <img className={classes.certificateImage} ref={'image'} src={'sample_certificate.png'} alt={"Certificate Preview"} draggable='false' />

            </div>
        </div>
    )
}

添加时，单击“添加名称容器”，然后拖动图像底部（向下滚动）部分的“示例名称”div，该div不会放在那里。下面是一个例子：

---

感谢您的帮助。谢谢

在onDrop函数中，不要使用event.clientX和clientY，请尝试使用pageX和pageY。PageX和pageY不会随滚动而改变，其中as clientx和clienty是从窗口中可见页面的左上角计算出来的。更多详情请参见下面的答案。

---

您还可以使用event.clientX+window.pageXOffset和event.clientY.window.pageYOffset，使用滚动条进行计算

.certificateImage{
    position:absolute;
    z-index: 0;

}

.variableElement{
    position:absolute;
    white-space: nowrap;
    width: 100%;
}

.certificateContainer{
    position:absolute;
    object-fit: cover;
    width: 100%;
    max-height: 250px;
}

.variableSelect{
    position: relative;
}