Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Dragging and dropping CHAPTER 13 513

Quick check

■■Which two events’ default operations must be prevented to allow the drop event

to operate?

Quick check answer

■■The dragenter and dragover events

FIGURE 13-3 he item being dragged and the item after being droppedT

Using the DataTransfer object

The previous example demonstrates a complete drag and drop operation, but you can also

use the DataTransfer object to pass data from the dragstart event to the drop event. By using

the DataTransfer object, you don’t need to create a global variable to reference the item

being dragged. Using the DataTransfer object also empowers you to pass any data to the

drop event as long as it can be represented as a string or URL. The DragStart object is refer-

enced as a dataTransfer property on the dragstart event.

NOTE USING THE DATATRANSFER OBJECT WITH JQUERY

If you’re using jQuery to bind events, the dataTransfer property will be missing, but it can

be added by adding the following statement to the document ready function.

jQuery.event.props.push('dataTransfer');

jQuery creates a wrapper object that resembles the original event and copies only the data

from the original object that jQuery needs. This statement tells jQuery to look for the data-

Transfer property on the original object and, if it exists, to copy it to the jQuery wrapper.