Building an Application with Drag-and-Drop

Using the concepts we've already learned, we'll build a simple drag-and-drop page in the theme of our Happy Trails Running Club. This page lets the club race organizers drag members of the club into one of two lists: racers and volunteers. In order to sort them into competitive groups, racers will be sorted by their age. Volunteers, on the other hand, are only sorted by their names, as their ages don't matter when they are not competing.

The sorting of the lists is done automatically. The application itself will show feedback indicating where proper drop areas are for members into the two lists as shown in Figure 9-4.

Figure 9-4. Example page showing racers sorted into lists

All of the code for this example is included with the book's samples in the code/draganddrop directory. We'll step through the page and explain how it works in practice.