ویژگی ondragover در HTML در سایت PNLdev

اجرا
<!DOCTYPE HTML>
<html>
	<head>
		<style>
			#droptarget {
  				float: left; 
 				width: 200px; 
  				height: 35px;
  				margin: 55px;
 				margin-top: 155px;
 				padding: 10px;
      			border: 1px solid #aaaaaa;
			}
		</style>
	</head>
	<body>
		<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me into the rectangle!</p>
		<div id="droptarget" ondrop="drop(event)" ondragover="myFunction(event)"></div>
		<p style="clear:both;" id="demo"></p>
		<script>
			function dragStart(event) {
  				event.dataTransfer.setData("Text", event.target.id);
			}

			function myFunction(event) {
  				event.preventDefault();
  				document.getElementById("demo").innerHTML = "The p element is OVER the droptarget.";
  				event.target.style.border = "4px dotted green";
			}

			function drop(event) {
 				 event.preventDefault();
 				 let data = event.dataTransfer.getData("Text");
  				event.target.appendChild(document.getElementById(data));
  				document.getElementById("demo").innerHTML = "The p element was dropped.";
			}
		</script>
	</body>
</html>