HTML5 APIs - HTML5 Advertising - page 119

Chapter 6

HTML5 APIs

Many people use a translator or tour guide when visiting a new country. They lean on someone who knows the land
and the people inside and out, someone who can also show you what to do and what not to do when you arrive. In
this case, think of the new country as all the modern browser technologies and that translator as the Application
Programming Interfaces (APIs) used to communicate with those technologies. To get things done in this or any new
country, you need to “talk the talk”—and that's basically what APIs do. They are a communication layer that gives
access to a specific form of technology by communicating through code.
In this chapter, we'll cover a lot on HTML5 APIs. Since you've already learned a bit about them so far, consider
yourself having a nice head start. The canvas , CSS3, even SVG—all are APIs in their own way, and this chapter will
review some of the new APIs that emerging HTML5 browsers have brought to us. However, we will not be covering
all of them as there are way too many to do that within the scope of this topic. However, you can see most of them at
http://platform.html5.org . Also, keep in mind that most of the APIs aren't part of the actual HTML5 specification.
Several did start in the HTML5 spec and later were moved into their own standard and thus adopted the blanket term
of HTML5 by default. While most of these APIs require some level of JavaScript to operate with, they all do different
things and behave in different ways. Moreover, studying them will entirely change how you work inside the browser
using standards. Trust me! So let's start digging into the real muscle of HTML5. Be sure to get your coding hat on
because HTML5 APIs rely heavily on JavaScript.

Drag-and-Drop
Up first, let's chat about the drag-and-drop (DnD) API, a relatively new addition to the HTML5 spec. This API provides
a very simple approach to dragging and dropping elements on a page or piece of content, like an ad unit. Moreover, it
requires a minimal amount of code to implement. Originally created by Microsoft in version 5 of the Internet Explorer
browser, it has experienced some developer backlash (to say the least) due to bugs in the API spec, implementations in
browsers, and uses around drag events. See http://quirksmode.org/blog/archives/2009/09/the_html5_drag.html
for more information.
After some improvements and since IE, Opera, Firefox, Safari, and Chrome support it in some way or another,
this API now brings native drag-and-drop support to the modern browser environment without a third-party plug-in
or JavaScript library. Simply by adding a “draggable=true ” attribute on any DOM element you wish the user to drag
(while including some basic event listeners/handlers via JavaScript on a “drop zone”), you can instruct the browser
where elements can be dropped.

■ The elements img and a (with an href ) are draggable by default, but keep in mind that not all elements
(e.g., images) can be drop areas.

Note