📌  相关文章
📜  HTML | ondragleave 事件属性(1)

📅  最后修改于: 2023-12-03 15:01:14.506000             🧑  作者: Mango

HTML | ondragleave 事件属性

什么是 ondragleave 事件属性？

ondragleave 事件属性是 HTML 元素的一种事件属性，它定义了在拖拽元素从拖放目标中离开时所要执行的代码。

语法
<element ondragleave="runThisCode()"></element>
使用方法

当一个拖拽元素移出拖放目标时，ondragleave 事件将被触发。所定义的代码将帮助程序员决定如何操作被拖放的数据，以及如何改变拖放目标元素的外观。

代码示例
<!DOCTYPE html>
<html>
<head>
	<title>HTML ondragleave 事件属性示例</title>
	<style>
		#dropzone {
			width: 200px;
			height: 200px;
			background-color: lightgray;
			padding: 20px;
		}
		#dropzone.dragover {
			background-color: gray;
		}
	</style>
	<script>
		function handleDragover(event) {
			event.preventDefault();
			document.getElementById("dropzone").classList.add("dragover");
		}

		function handleDragleave(event) {
			event.preventDefault();
			document.getElementById("dropzone").classList.remove("dragover");
		}

		function handleDrop(event) {
			event.preventDefault();
			document.getElementById("dropzone").classList.remove("dragover");
			var data = event.dataTransfer.getData("text");
			document.getElementById("dropzone").textContent = data;
		}
	</script>
</head>
<body>
	<h1>ondragleave 事件属性示例</h1>
	<p>将文本拖拽到灰色区域内！</p>
	<div id="dropzone" ondragover="handleDragover(event)" ondragleave="handleDragleave(event)" ondrop="handleDrop(event)">释放并在此处放置文件</div>
</body>
</html>

这是一个简单的 HTML 示例代码，演示了 ondragleave 事件属性的使用方式。拖拽文本时，当指针从拖放目标中移开时，将触发 handleDragleave() 函数，该函数负责移除“dragover”类，以改变拖放目标的外观。