How To Drag And Drop Images Using HTML 5

Dipendra Singh Shekhawat
Mar 29, 2016
7.1k
0
1
Article

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>

Result

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.

<img draggable="true">

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.