如果将可拖动元素或文本拖动到有效的放置目标,则ondragover事件属性将触发。要拖动一个元素,将该元素拖到拖动点。在这里,我们将使用全局HTML 5 draggable属性。数据和元素无法删除。要允许放置,您必须调用event.preventDefault()方法。 HTML 5中的新函数,不支持以下版本的HTML。
注意:图片和链接默认为可拖动。
属性:
- 事件在可拖动目标上触发:
- ondragstart:当用户开始拖动元素时触发。
- 拖曳:拖动元素时触发。
- ondragend:当用户不再拖动元素时触发。
- 事件在放置目标上触发:
- 激怒者:当拖动的元素进入放置目标时,将触发此操作。
- ondragover:当拖动的元素位于放置目标上方时,将触发此操作。
- ondragleave:当拖动的元素离开放置目标时,将触发此操作。
- 落入:当拖动的元素已放置在放置目标上时,将触发此操作。
用法:
<element ondragover="script">
属性值:它包含单值脚本,该脚本保存将在ondragover事件上运行的脚本。
Example:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML ondragover event attribute</title>
<style>
.box {
width:250px;
height:100px;
margin:15px;
padding:5px;
border:2px solid black;
color:Green;
}
</style>
<script>
/* Function of start drag contenr */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
/* Function of allow drop content */
function allowDrop(event) {
event.preventDefault();
document.getElementById("demo").innerHTML =
"The element is OVER the droptarget.";
event.target.style.border = "3px solid green";
}
/* Function of drop content */
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById("demo").innerHTML =
"The element was dropped.";
}
</script>
</head>
<body>
<center>
<p>
Drag the element from top box
and drop at bottom box
</p>
<div class="box">
<h1 ondragstart="dragStart(event)"
draggable="true" id="dragtarget">
GeeksforGeeks
</h1>
</div>
<div class="box" ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<p style="clear:both;"></p>
<p id="demo"></p>
</center>
</body>
</html>
输出:
- 拖动元素之前:
- 删除元素后:
支持的浏览器:下面列出了ondragover event属性支持的浏览器:
- 谷歌浏览器4.0
- Internet Explorer /Edge 9.0
- Firefox 3.5
- Opera 12.0
- Safari 6.0
相关用法
- HTML ondragover事件用法及代码示例
- HTML oninvalid用法及代码示例
- HTML onsubmit用法及代码示例
- HTML onunload用法及代码示例
- HTML onkeyup用法及代码示例
- HTML ondrop用法及代码示例
- HTML onpageshow用法及代码示例
- HTML onsearch用法及代码示例
- HTML onhashchange用法及代码示例
- HTML onerror用法及代码示例
- HTML onbeforeunload用法及代码示例
- HTML onbeforeprint用法及代码示例
- HTML onafterprint用法及代码示例
- HTML onchange用法及代码示例
- HTML oninput用法及代码示例
- HTML ondblclick用法及代码示例
- HTML onload用法及代码示例
- HTML onmousemove用法及代码示例
- HTML onmouseup用法及代码示例
- HTML onwheel用法及代码示例
- HTML oncontextmenu用法及代码示例
- HTML onpaste用法及代码示例
- HTML onfocus用法及代码示例
- HTML onmouseover用法及代码示例
注:本文由纯净天空筛选整理自AlieaRizvi大神的英文原创作品 HTML | ondragover Event Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。