HTML5 Data and Services Cookbook

Using a drag-and-drop file area

With HTML5 we have another alternative for reading user files: we can use drag-and-drop areas. Often users find drag-and-drop intuitive and prefer it to other editing and manipulation methods.

Drag-and-drop also enable the user to drag elements from a different window or tab into ours, meaning they have more uses than regular file upload buttons.

In this recipe, we're going to make a drag-and-drop area for images. It will work both with dragged files and with images dragged from a different window or tab.

Note

More information about the HTML5 drag-and-drop specification can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html.

How to do it...

Let's write the code.

1. We're going to create an HTML ...