HTML5 and CSS3, Second Edition

Tip 34

Tip 34. Getting It All Sorted Out with Drag and Drop

Since the introduction of the mouse, we’ve been trained to drag elements

around on the screen. For many years, we’ve relied on JavaScript and Docu-

ment Object Model solutions to bring drag-and-drop capabilities to the

browser. The HTML5 specification gives us a native and more performant way

to make elements draggable, although the implementation is a bit complex.

AwesomeCo’s management team has an idea for a piece of software where

users can enter ideas on virtual notecards and then reorder them on the

screen. We get to build the basic user interface for this, and it’s is a great

opportunity for us to experiment with native Drag and Drop. When we’re

done, we’ll have something that looks like the following figure.

Figure 37—The card-sorting application lets us drag cards around.

Creating the Basic Interface

Let’s start off the interface for this application with a basic HTML5 skeleton

that includes a link to a style sheet called stylesheets/style.css, a button to add

a card, and a region on the screen where the cards will be inserted and sorted.

report erratum • discuss

Getting It All Sorted Out with Drag and Drop • 231

Download from Wow! eBook <www.wowebook.com>