How to Drag & Drop images using HTML 5?

How to drag and drop images using HTML 5?

Howdy Reader,

HTML 5 is an awesome guy 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 our previous article.

Drag and drop is very common feature and very 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 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.

Result:

drag and drop images using HTML 5

Drag and Drop Feature HTML 5

Explaining the above given example:

First of all 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 – ondragstartondragover and ondrop.

Finally, calling the respective JavaScript function will do the job.

Run the example to see live results HTML 5 Drag and Drop

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 🙂

What do you Think ?

Dear Reader,
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.

Happy Learning 🙂