<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>H5拖放API相关触发事件</title>
<style>
body {
text-align: center;
}
.half-opacity {
opacity: 0.3
}
.full-opacity {
opacity: 1;
}
</style>
</head>
<body>
<h1>拖动的目标对象触发的事件</h1>
<img id="trash" src="images/trash.png" class="half-opacity">
<hr />
<img src="images/p4.png">
<script>
// 源对象被拖动着进入目标对象
trash.ondragenter = function () {
console.log('drag enter')
trash.className = "full-opacity"
};
// 源对象被拖动着悬停在目标对象上方
trash.ondragover = function (e) {
// dragover事件默认行为：必须触发dragleave
// 阻止默认行为,使得drop可能触发
e.preventDefault();
console.log('drag over')
trash.className = "full-opacity"
};
// 源对象被拖动着离开了目标对象
trash.ondragleave = function () {
console.log('drag leave')
trash.className = "half-opacity"
};
// 源对象在目标对象上释放
trash.ondrop = function () {
console.log('drop')
trash.className = "half-opacity"
}
</script>
</body>
</html>
