HTML5 Guidelines for Web Developers

282 Chapter 12—Finishing Touches:Some Global Attributes

Figure 12.2 The game “1-2-3-4!” in action

The DataTransfer object also provides interesting methods and attributes—for

example, the method setDragImage(element, x, y) with which we can display

a custom image during dragging to provide feedback. A similar effect can be

achieved with addElement(element), but this time we can drag along not just an

image, but whole sections of a page as a feedback indicator.

With dataTransfer.types, we can return a DOMStringList of all formats and their

values that were assigned with setData() at the startdrag event. In our game this

list was short and contained only one item with the ID in the format text, inter-

preted automatically by the browser as text/plain. The format is not completely

restricted to using MIME types; the specification also allows formats that do not

correspond to a MIME type. So we could have used all data attributes with speak-

ing names as a format. Using the example of the ID and the number of inhabit-

ants, this would look as follows:

evt.dataTransfer.setData('id',evt.target.id);

evt.dataTransfer.setData('pop',evt.target.dataset.pop);

Retrieving them at a later time would then have been easier via getData('id') or

getData('pop').