HTML5 Digital Classroom

Lesson 16: HTML5 Drag and Drop

In this lesson, you will learn to incorporate the HTML5 drag-and-drop feature into your website to let your users actively interact with your site.

What you’ll learn in this lesson:

• • Working with the drag-and-drop interface
• • The differences in browser APIs and how to account for them
• • Showing visual indicators for drag-and-drop operations
• • Transfering data with a drag-and-drop operation

Starting up

You will work with several files from the HTML5_16lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

To accurately preview the HTML5 content you will create in this lesson, you need a browser that supports HTML5 tags. See “Using web browsers that support HTML5 tags” in the Starting Up section of this book to determine whether you are using such a browser, or for instructions on downloading one.

Drag and drop on the Web

Drag-and-drop operations let users visually position elements on the screen instead of positioning elements by clicking a button. This ability has made certain applications, such as Dreamweaver and Photoshop, easy to use.

The HTML5 Drag and Drop API is based on the original Internet Explorer implementation. Some details have changed, but a standardized API is close to being ...