O'Reilly logo

HTML5 Digital Classroom by AGI Creative Team, Jeremy Osborn

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

Lesson 16: HTML5 Drag and Drop

html5_10_opener.psd

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

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