HTML5 is awesome when it comes to creating a web page. These days, 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 basics of HTML 5, then please have a look at the following article.
Drag and drop is a very common feature and convenient to 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 is a part of HTML 5 standard. Using HTML 5 along with JavaScript you can achieve the desired result.
Tested and working example of drag and drop feature.
- <!DOCTYPE HTML>
- <html>
-
- <head>
- <style>
- #box {
- width: 110px;
- height: 110px;
- padding: 10px;
- text-align: center;
- margin: 0 auto;
- border: 1px solid #aaaaaa;
- }
-
- body {
- text-align: center;
- }
- </style>
- </head>
-
- <body>
- <p><b>Drag the DS image into this box:</b></p>
- <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)">
- <script>
- 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>
-
- </html>
![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.
Now, you need to specify three attributes which will call the respective events or functions – ondragstart, ondragover and ondrop.
- <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
- <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 link on drop).
Hope you added something to your knowledge base and this post would have helped you in knowing something which you didn’t earlier.![Smile]()
What do you think
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.