javascript - 向下滚动时无法将拖动的 div 拖放到图像的一部分

Question

当向下滚动大图像时，可拖动的 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>
    )
}

此组件的 CSS

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

当您添加时，单击“添加名称容器”，然后将“示例名称”div 拖动到图像底部(向下滚动)部分，它不会落在那里。这是示例:

https://sandbox-385a6.firebaseapp.com/

感谢任何帮助。谢谢!

Answer 1

在 onDrop 函数中，尝试使用 pageX 和 pageY，而不是使用 event.clientX 和 clientY。 PageX 和 pageY 不会随着滚动而改变，因为 clientx 和 clienty 是从窗口中可见页面的左上角开始计算的。请参阅下面的答案了解更多详情。 what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y