Chapter 5. User Interactions

It may seem like HTML5 has a lot to do with how things work under the covers. We discussed a new way to draw, a new way to present imagery, a new way to perform animation, new ways to store data, and new ways to talk to the server. This chapter focuses on a different aspect of HTML5: the new way you interact with the page.

Drag-and-drop might not be a new idea. We’ve had drag-and-drop in apps for years, where we as developers built some slick JavaScript engine that helped us drag things from one spot on the page to another. Drag-and-drop was really an industry-changing idea when it was introduced, but HTML5 has taken this capability one step further. HTML5 drag-and-drop is not just about what you can drag around the page, although it does that; it’s also about dragging things between your browser and your computer. HTML5 drag-and-drop lets you bring data into a web app simply by dragging it. It also lets you take data out with the same drag-and-drop interface you’ve grown used to over the years. Drag-and-drop takes your web applications one step closer to being integrated into your operating system.

Editable content takes data entry to a new level as well. In the past, we’ve been able to edit data within a form field. HTML5 takes this capability to the next level by allowing us to edit content in any element of the page, whether it is in a paragraph, a list of items, or a page header. Editable content has the potential to bring new levels of customization ...

Get HTML5 Hacks now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.