O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required