I have a challenge where I need to overlay text on a video and make it draggable across the entire video. Currently, I am able to display the text over the video successfully, but when I try to drag it and then drop it, the text appears below the video and becomes unresponsive to further dragging. This project is being developed using React JS.
<div className="container" >
<div onDrop={this.allowDrop} onDragOver={this.dragOver}>
<video id="video" width="820" src="video.mp4"/>
</div>
<div className="overlay">
<p draggable onDragStart={this.allowDrag} id="hey">hey there</p>
</div>
</div>
allowDrag=(e)=>{
e.dataTransfer.setData("text", e.target.id);
}
allowDrop = (e)=>{
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
dragOver = (e)=>{
e.preventDefault();
}
This is how my CSS is structured:
.container { position:relative; }
.container video {
position:relative;
z-index:-1;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
Does anyone have any suggestions on how to fix this issue?