Post
Ask Question

Drag and Drop In HTML5

Drag and Drop in HTML5 

 
In this blog, we will discuss about the drag and drop property in HTML5.
 
For this, Follow these steps:
 
Step1: First we take two image controls and a paragraph tag ( which we want to drag) and a div in which we want to drop like this:
  1. <img id="drag1" src="1.jpg" draggable="true"  
  2. ondragstart="mydrag(event)" width="60" height="70" />  
  3. <img id="drag2" src="Chrysanthemum.jpg" draggable="true"  
  4. ondragstart="mydrag1(event)" width="60" height="70" />  
  5. <p id="p1" width="15" height="70" draggable="true" ondragstart="mydrag2(event)" > Mahak Gupta</p>  
  6. <div id="div1" ondrop="mydrop(event)"  
  7. ondragover="possibleDrop(event)"></div>  
Here we set the Draggable property and he events of drag and drop.
 
Step2: Now we will write the js code and set the style of the div tag like this:
  1. < script type = "Text/javascript" >  
  2.  function possibleDrop(ev) {  
  3.   ev.preventDefault();  
  4.  }  
  5. function mydrag(ev) {  
  6.  ev.dataTransfer.setData("Text", ev.target.id);  
  7. }  
  8. function mydrag1(ev) {  
  9.  ev.dataTransfer.setData("Text", ev.target.id);  
  10. }  
  11. function mydrag2(ev) {  
  12.  ev.dataTransfer.setData("Text", ev.target.id);  
  13. }  
  14. function mydrop(ev) {  
  15.  ev.preventDefault();  
  16.  var mydata = ev.dataTransfer.getData("Text");  
  17.  ev.target.appendChild(document.getElementById(mydata));  
  18. } <  
  19. /script>  
Here preventDefault() is used to prevent the default handling on the data. and the getData() method is used to return the data which is passed by setData().
 
The Output Will be:
 
124.png
 
Complete Program:
  1. <html>  
  2.     <head>  
  3.         <script type="Text/javascript">  
  4. function possibleDrop(ev)  
  5. {  
  6. ev.preventDefault();  
  7. }  
  8. function mydrag(ev)  
  9. {  
  10. ev.dataTransfer.setData("Text",ev.target.id);  
  11. }  
  12. function mydrag1(ev)  
  13. {  
  14. ev.dataTransfer.setData("Text",ev.target.id);  
  15. }  
  16. function mydrag2(ev)  
  17. {  
  18. ev.dataTransfer.setData("Text",ev.target.id);  
  19. }  
  20. function mydrop(ev)  
  21. {  
  22. ev.preventDefault();  
  23. var mydata=ev.dataTransfer.getData("Text");  
  24. ev.target.appendChild(document.getElementById(mydata));  
  25. }  
  26. </script>  
  27.         <style type="Text/css">  
  28. #div1  
  29.  {  
  30. width:500px;  
  31. height:80px;  
  32. border:1px solid Blue;}  
  33. </style>  
  34.     </head>  
  35.     <body>  
  36.         <img id="drag1" src="1.jpg" draggable="true"  
  37. ondragstart="mydrag(event)" width="60" height="70" />  
  38.         <img id="drag2" src="Chrysanthemum.jpg" draggable="true"  
  39. ondragstart="mydrag1(event)" width="60" height="70" />  
  40.         <p id="p1" width="15" height="70" draggable="true" ondragstart="mydrag2(event)" > Mahak Gupta</p>  
  41.         <div id="div1" ondrop="mydrop(event)"  
  42. ondragover="possibleDrop(event)"></div>  
  43.     </body>  
  44. </html>  
Next Recommended Reading Autocomplete In HTML5