HTML5 Guidelines for Web Developers

12.5 Drag and Drop with the “draggable” Attribute 281

color: #AAA;
background-color: #EEE;
border-color: #AAA;
}
.aInactive {
pointer-events: none;
background-color: hsl(60,100%,85%);
border-color: hsl(60,100%,40%);
}

At this point in the game, we check whether all cities have been assigned in the
order of their number of inhabitants. Correct answers are highlighted in green.
Incorrect answers are removed and can then be arranged once more. For the
color change in correct answers, we again use classList.add(); the correspond-
ing CSS format looks like this:

.aCorrect {
background-color: hsl(75,100%,85%);
border-color: hsl(75,100%,40%);
}

As soon as all answers are correct, the player is congratulated on his or her suc-
cess, and if the player clicks the restart button, four other randomly selected
cities are offered for another game. If a user finds numbers of inhabitants too
tedious, the user can select two other game modes from the pull-down menu:
arranging the cities by geographical location from North to South or East to West.
For details on the JavaScript and CSS implementation, see these links:

z http://html5.komplett.cc/code/chap_global/1234.js

z http://html5.komplett.cc/code/chap_global/1234.css

You can see the completed game in action in Figure 12.2. If you would like to
expand the game, you can go right ahead and implement an expansion Select
number of cities! The static list on the left should then be generated dynamically.
Have fun!

Let’s get back to our original topic, drag and drop. After this simple and prac-
tical example, several details are still open—for example, three other events
available for drag and drop operations: drag, dragend, and dragleave. During
dragging, a drag event is created at an interval of 350 ms (±200 ms); dropping
creates a dragend event. The third event, dragleave, concerns the target object
and occurs when leaving a potential drop zone.