Javascript 如何使用HTML在视频上拖动文本？

我想在视频上显示文本，并想使其在整个视频上可拖动，我可以显示它，但当我拖动它然后放下时，它会出现在我的视频下面，在它变得不可拖动之后。我正在使用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>

我的css看起来像这样

.container { position:relative; }
.container video {
    position:relative;
    z-index:-1;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

---

有什么建议吗？？？

使用鼠标指针坐标的状态

类主扩展React.Component{
状态={
x:0,，
y:0
};
allowDrag=e=>{
//e.预防违约（）；
e、 dataTransfer.setData（“文本”，即target.id）；
};
allowDrop=e=>{
e、 预防默认值（）；
//var data=e.dataTransfer.getData（“文本”）；
//e.target.appendChild（document.getElementById（数据））；
};
德拉戈弗=e=>{
e、 预防默认值（）；
//console.log（e.clientX，e.clientY）；
这是我的国家({
x:e.clientX，
y:e.clientY
});
};
render（）{
返回(

嘿

);
}
}

这个技巧正在发挥作用，但当我拖放时，我的原始文本显示在原始鼠标指针的下方。

.container { position:relative; }
.container video {
    position:relative;
    z-index:-1;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}