Dragging and Dropping

Dragging and Dropping is part 8 of Beginner’s Guide to HTML5.

You might have seen most of online educational activities contains dragging and dropping tasks. Matching correct item to the correct box is one of the most popular learning activity. Previously it was done by Flash animations. But now on you do not need any 3rd party tools to do that because HTML5 is there for you. In HTML5, drag and drop is part of the standard, and any element can be draggable.

As we reminded you in the beginning of our NEW edition of this HTML5 tutorial, you might need to be familiar with JavaScript. If you know the basics, then you can carry on. Let’s look at a code snippet to see the usage of this new feature of HTML5.

[code language=”html”]


Little bit of style on the division, to make it look like a box

[code languague=”css”] #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

Here we have two elements. We are going to drag the image and drop into our division box. Check for the new attributes we are using.

Division tag contains ondrop and ondragover event attributes. We are calling them event attributes because it will trigger up the mentioned function when the event occurred.

Image tag contains a draggable attribute value as true. That’s why you can drag the image. But you cannot drag the division tag because it doesn’t contain this attribute set as true. This is important. So when you need your element to allow dragging on the web browser screen you need to include this attribute set as true.

Image tag also contains a event attribute called ondragstart. Let’s see what all those events going to call.

[code language=”js”]

drag() on ondragstart event – What to Drag

This should specify what should happen when the element, our image, is dragged. ondragstart attribute calls a function, drag(event), that specifies what data to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data. In this case, the data type is “text/html” and the value is the id of our image which is the draggable element.

allowDrop() on ondragover event – Where to Drag

This event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event.

drop() on ondrop event – Do the Drop

When the dragged data is dropped, a drop event occurs.

  • Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
  • Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method
  • The dragged data is the id of the dragged element which is our image
  • Append the dragged element into the drop element

Let’s see how this looks like. Try to drag and drop the image into the black bordered box.

If you want to drag back and forth the image with another place, what you need is another box element with the same ondrop and ondragover attributes.

[cjtoolbox name=’Drag_Drop_HTML5′ ] [/cjtoolbox]

Cool!! Isn’t it? HTML5 is getting more and more interesting. It let us to avoid using third party tools for interactive things. So in the next section, we are going to store data on web browser using HTML5 features. I mean not mass sized data, but small texts.

What’s Next?

Learn to Build Storages with HTML5.


Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below