先看如下代码:
<body>
<img src="Images/w3school_logo_black.gif" draggable="true" id="drag1" />
<video src="movie.ogg" width="320" height="240" controls="controls" style="position:absolute;left:400px;" οndrοp="fun1()" οndragοver="allowDrop(event)" >
Your browser does not support the video tag.
</video>
<script src="Scripts/jquery-1.11.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/MyDrag.js"></script>
<script src="Scripts/jquery.confirm.js"></script>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function fun1() {
debugger;
iboAlertWarning("拖放操作");
}
</script>
</body>
如上,先将一个图片设置为 draggable="true" ,这样它就可以拖拽了。
我们的目的是,拖着图片拽到标签<video>上,然后松开鼠标,触发ondrop事件,但是要注意,
如果想要触发ondrop事件,还需要给<video>标签定义ondragover事件,函数体如上。