Drag and Drop Events

This JavaScript program shows how to handle an ondrag event.

DragAndDrop.html

<!DOCTYPE html>
<html>
  <head>
  	<style>
#idSrc, #idDest {
	background-color:honeydew;
	border:1px gray solid;
	width:250px;
	height:50px;
	padding:25px;
}
  	</style>
    <script>
function allowDrop(e) {
  e.preventDefault();
}

function onDrag(e) {
  e.dataTransfer.setData("text", e.target.id);
}

function onDrop(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
    </script>
  </head>
  <body>
  	<div id="idSrc" ondrop="onDrop(event)" ondragover="allowDrop(event)">
  		<img src="XoaXLogo.png" draggable="true" ondragstart="onDrag(event)" id="drag1">
  	</div>
  	<div id="idDest" ondrop="onDrop(event)" ondragover="allowDrop(event)"></div>
  </body>
</html>

Core JavaScript

Drag and Drop Events

DragAndDrop.html

Output