Cannot drop dragged divs on the part of an image when scrolled down

Question

The draggable div does not drop to the proper position when a large image is scrolled down. I'm using the XY coordinates to adjust the draggable div's left and top css attributes but it does not work with images that have an overflow.

I've tried resizing the image not to overflow when it is large. It works but not the kind of solution that I'm looking for.

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 for this component

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

When you add click 'Add name container' then drag the 'Sample Name' div on the bottom(scroll down) part of the image it does not drop there. Here's the example:

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

Any help is appreciated. Thanks!

Answer 1

In the onDrop function, instead of using event.clientX and clientY try using pageX and pageY. PageX and pageY do not change with scroll where as clientx and clienty is calculated from top-left corner of the visible page in the window. Please see below answer for more details . what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y