The positioning of the div also changes when viewed on a larger screen. When inspected on a bigger screen, the position of the div shifts completely.
Check out the jsfiddle here: https://jsfiddle.net/annahisenberg/ft10ersb/20/
To view it in full screen mode, visit this link: https://jsfiddle.net/annahisenberg/ft10ersb/20/show
Here's the code snippet:
class Drag extends React.Component {
constructor(props) {
super(props);
this.state = {
x: this.props.x,
y: this.props.y,
showMoreOptionsPopup: false,
showHelpModal: false
};
this.reff = React.createRef();
this.dragMouseDown = this.dragMouseDown.bind(this);
this.elementDrag = this.elementDrag.bind(this);
this.closeDragElement = this.closeDragElement.bind(this);
this.showMoreOptionsPopup = this.showMoreOptionsPopup.bind(this);
}
componentDidMount() {
this.pos1 = 0;
this.pos2 = 0;
this.pos3 = 0;
this.pos4 = 0;
}
dragMouseDown(e) {
e.preventDefault();
this.pos3 = e.clientX;
this.pos4 = e.clientY;
document.onmouseup = this.closeDragElement;
document.onmousemove = this.elementDrag;
};
elementDrag(e) {
e.preventDefault();
this.pos1 = this.pos3 - e.clientX;
this.pos2 = this.pos4 - e.clientY;
this.pos3 = e.clientX;
this.pos4 = e.clientY;
this.setState({
y: this.reff.current.offsetTop - this.pos2 + "px",
x: this.reff.current.offsetLeft - this.pos1 + "px"
});
};
closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
};
showMoreOptionsPopup() {
this.setState({
showMoreOptionsPopup: !this.state.showMoreOptionsPopup
});
};
render() {
return (
<div>
<a
id="more_options_button"
className={this.state.showMoreOptionsPopup ? 'open' : null}
onClick={this.showMoreOptionsPopup}
style={{ left: this.state.x, top: this.state.y }}
onMouseDown={this.dragMouseDown}
ref={this.reff}
>
<div>
<p>menu</p>
</div>
</a>
</div>
);
}
}