Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

516 CHAPTER 13 Drag and drop

FIGURE 13-4 Completed drag and drop with list items

Lesson summary

■■The drag and drop functionality in HTML5 will be consistent and compatible across

browsers.

■■The draggable attribute must be set to true and added to each element that needs to

be draggable.

■■The dragstart and dragend events can be used to change the style of the element

being dragged.

■■The dragenter and dragover events must be coded to prevent the default operation

and enable dropping.

■■The drop event triggers when the item is dropped on a drop target.

■■The DataTransfer object is used to pass data between the dragstart event and the drop

event.

Lesson review

Answer the following questions to test your knowledge of the information in this lesson. You

can find the answers to these questions and explanations of why each answer choice is correct

or incorrect in the “Answers” section at the end of this chapter.

1. Which of the following events trigger continuously during a drag and drop operation?
   (Choose all that apply.)
   A. dragstart
   B. drag
   C. dragend
   D. dragenter