HTML5 Hacks

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