☰

Drag and Drop in HTML5

The Drag and Drop Event is the most fabulous properties of HTML5. With the help of Drag and Drop features We can move an object from one place to another place. The all major browsers support the dragging except of Safari 5.1.2. In the process of dragging an object we have to just grab an object from its original place and leave it or drag it in the specified area. All the process is done with the help of Java Script. The Drag and Drop Event may be a little bit complex but we have tried to make it very simple just take a look at below of the page for detail descriptions.

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	 
		 <title>Title name will go here</title>
		 
		 <style>
		 	
			#div1 {width:200px;height:150px;padding:10px;border:1px solid green;}
			#div2 {width:200px;height:150px;padding:10px;border:1px solid green;}
		 
		 </style>
		 
		 <script type="text/javascript">
		 
			function allowDrop(ev)
				{
					ev.preventDefault();
				}
			function drag(ev)
				{
					ev.dataTransfer.setData("Text",ev.target.id);
				}
			function drop(ev)
				{
					ev.preventDefault();
					var data=ev.dataTransfer.getData("Text");
					ev.target.appendChild(document.getElementById(data));
				}
		 
		 </script>
		 
    </head>
    
    <body>
		
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
			
			<img id="drag1" src="images/html5_logo.png" alt="html5 tutorial" draggable="true" ondragstart="drag(event)" id="drag1"/>
		
		</div>
		
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
		</div>
        
    </body>
    
</html>

Download


HTML5 Elements — Quick References