Drag and Drop Elements in HTML5

Create new folder named images. Copy images need in demo to this folder

<html>
<head>
	<meta>
	<title>Drag and Drop Elements in HTML5</title>
	<style type="text/css">
		#div1, #div2 {
			float: left;
			width: 140px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 1px solid #aaaaaa;
		}
	</style>

	<script type="text/javascript">

		function dragstart(event) {
			event.dataTransfer.setData('id', event.target.id);
		}

		function dragover(event) {
			event.preventDefault();
		}

		function drop(event) {
			event.preventDefault();
			var id = event.dataTransfer.getData('id');
			document.getElementById('div2').appendChild(document.getElementById(id));
		}

	</script>
</head>

<body>

	<div id="div1">
		<img id="photo" src="images/thumb3.gif" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">
	</div>

	<div id="div2" ondragover="dragover(event)" ondrop="drop(event)"></div>

</body>

</html>

Open site in browser and display as below:

Before

After