📅 最后修改于: 2023-12-03 14:41:52.150000 🧑 作者: Mango
在 HTML 中，ondragover 事件属性允许您指定在元素上拖动对象时发生什么。
您可以使用 ondragover 事件属性在元素上指定有拖动操作时执行的 JavaScript 代码。例如，当您将拖动一个对象到一个目标元素上时，您可能需要更改元素的背景颜色来指示它可以接受该对象。
以下是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>ondragover 事件属性</title>
<style>
#dropzone {
width: 300px;
height: 200px;
border: 2px dotted black;
padding: 10px;
margin: 10px;
}
#dropzone.dragover {
background-color: lightgray;
}
</style>
</head>
<body>
<div id="dropzone" ondragover="dragOver(event)" ondrop="drop(event)">
将文件拖至此处
</div>
<script>
function dragOver(event) {
event.preventDefault();
event.target.classList.add('dragover');
}
function drop(event) {
event.preventDefault();
event.target.classList.remove('dragover');
var file = event.dataTransfer.files[0];
console.log('您拖动的文件是：' + file.name);
}
</script>
</body>
</html>
在这个例子中，我们在一个 div 元素上设置了 ondragover 事件属性来指示当鼠标悬停在该元素上时，拖动对象可放置在该元素内。我们还使用了 ondrop 事件属性来指示当拖动对象在该元素内释放时要执行的 JavaScript 代码。
在 dragOver 函数中，我们使用 event.preventDefault() 方法来取消默认行为，以便在元素上放置拖动对象。我们还将 dragover 类添加到目标元素的类列表中，以更改其背景颜色。在 drop 函数中，我们取消了默认行为，并删除了 dragover 类，以便元素可以重新设置为其默认背景颜色。我们还使用 event.dataTransfer.files 属性来获取拖动文件的文件名。
此事件在可拖动元素悬停在接收元素上时触发。
语法：
ondragover="myFunction(event)"
此事件在用户将鼠标按钮释放时，在目标元素上触发一个拖放操作。
语法：
ondrop="myFunction(event)"
阻止某些元素的默认行为。
语法：
event.preventDefault()
当您需要使用 HTML 拖放功能时，您可以使用 ondragover 事件属性来指示可拖动元素拖动到接收元素时的行为。通过取消默认事件，并添加/删除类，您可以指示接收元素可以放置拖动对象，并更改元素的外观以指示这一点。