User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 330

This function contains the logic for removing the dragged item and adding it back in
at a different spot.
Add the final function that resets the styles and, lastly, ensure the script is set to run
when the page fully loads:
…
function dragEndHandler(e) {
dragging.style.opacity = "1.0";
}
window.onload = init;
That's it! You should have an ordered list that you can drag and drop the items in to
change the order ( Figure 7-15 ) .
Figure 7-15. A drag-and-drop ordered list allowing for user reordering of the list items
Summary
My hope it that this chapter has shown you how you can peer into the JavaScript APIs
that are sprinkled throughout the HTML5 specification. With scripting, the possibilities
are as big as your imagination. The page can be changed in so many ways, dynamically
and interactively. For example, an initially uninspiring thing like a blank canvas can be
built to include all sorts of interesting effects for generating real-time changes to images.
Or drag-and-drop functionality can be used for building all sorts of unique interfaces that
might be found on such applications as web forms, games, or administrative interfaces.
Using JavaScript, HTML, and CSS together, you could create beautiful skins (controls)
for a custom HTML5 video player, which would look the same across all major web
browser platforms. You could take the same approach with the audio element as well.
The best way to learn how the JavaScript APIs work is to use them; and remember, if