How To Drag And Drop Images Using HTML 5

Dipendra Shekhawat

6y54.2k10100Article

HTML5Drag Drop Images

10 Comments

Join the conversation! Your thoughts help the community grow.

Bhuvanesh Mohankumar10y ago
Good one...
Dipendra Shekhawat10y ago
If you guys really like this article then can you please comment on my blog - http://dipendrashekhawat.com/how-to-drag-and-drop-images-using-html-5/. I would really appreciate it.
Imran Khan10y ago
nice
Santhakumar Munuswamy10y ago
Thanks for nice share
Ehsan Sajjad10y ago
Well written
Ankur Mistry10y ago
Nice share
Raja T10y ago
Nice, Thanks for sharing
Mohammed Ibrahim10y ago
nice
Humayun Kabir Mamun10y ago
Nice...
Kumaresh Rajalingam10y ago
Nice

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.

<!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 that 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 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.

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.