Post
Ask Question

How To Drag And Drop Images Using HTML 5

Introduction 

 
HTML5 is awesome when it comes to creating a web page. These days, the web page is no more just a static content holder. It has evolved a lot to produce rich and lively content.
If you want to read about the basics of HTML 5, then please have a look at the following article.
 
Drag and drop is a very common feature and convenient for users. Simply you need to grab an object and put it at the place you want to. This feature is commonly used by many of the online examination websites wherein you have the options to pick up the correct answer, drag it to the answers place holder and drop it.
 
Drag and drop are a part of the HTML 5 standard. Using HTML 5 along with JavaScript you can achieve the desired result.
 
A tested and working example of a drag and drop feature.
  1. <!DOCTYPE HTML>    
  2. <html>    
  3.     
  4.     <head>    
  5.         <style>    
  6.         #box {    
  7.             width: 110px;    
  8.             height: 110px;    
  9.             padding: 10px;    
  10.             text-align: center;    
  11.             margin: 0 auto;    
  12.             border: 1px solid #aaaaaa;    
  13.         }    
  14.             
  15.         body {    
  16.             text-align: center;    
  17.         }    
  18.         </style>    
  19.     </head>    
  20.     
  21.     <body>    
  22.         <p><b>Drag the DS image into this box:</b></p>    
  23.         <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)">    
  24.             <script>    
  25.             function allowDrop(ev)    
  26.             {    
  27.                 ev.preventDefault();    
  28.             }    
  29.     
  30.             function drag(ev)    
  31.             {    
  32.                 ev.dataTransfer.setData("text", ev.target.id);    
  33.             }    
  34.     
  35.             function drop(ev)    
  36.             {    
  37.                 ev.preventDefault();    
  38.                 var data = ev.dataTransfer.getData("text");    
  39.                 ev.target.appendChild(document.getElementById(data));    
  40.             }    
  41.     </script>      
  42. </html>    
Result
Drag and Drop Feature HTML 5
 

Drag and Drop Feature HTML 5

 
Explaining the above-given example. Firstly, you need to mark the element (image in this case) as draggable which you want to drag.
  1. <img draggable="true">     
Now, you need to specify three attributes that will call the respective events or functions – ondragstart, ondragover, and ondrop.
  1. <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>    
  2. <br> <img id="logo" src="dslogo.png" title="DS Logo" alt="DS Logo" draggable="true" ondragstart="drag(event)">    
Finally, calling the respective JavaScript function will do the job.
 
Note
  • We are calling preventDefault() to prevent the browser default handling of the data (default action is to open as a link on the drop).
I hope you added something to your knowledge base and this post would have helped you in knowing something which you didn’t earlier.
 
Smile
 

Summary 

 
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.


Similar Articles