C H A P T E R 1 3 Drag and drop Prior to HTML5, the ability to drag and drop operations was possible with some browsers but wasnt compatible across different browsers. You typically implemented drag and drop is a first-class citizen of HTML5, which is the first step toward having a compatible implementation across rowsers. You might still use jQuery for other functionality, but its not required for drag and drop. This chapter shows you how to drag and drop from one location to another on the web-page and then how to do drag and drop files. Lessons in this chapter:  Lesson 1: Dragging and dropping 507  Lesson 2: Dragging and dropping files 517 517 Before you begin To complete this book, you must have some understanding of web development. This chapter requires the hardware and software listed in the System requirements section in the books Introduction. Lesson 1: Dragging and dropping Making drag and drop part of HTML5 means that you can get browser compatibility and browser integration and, as you'll see in Lesson 2, "Dragging and dropping files," you can achieve integration with the operating system. After this lesson, you will be able to:  Describe HTML5 drag and drop.  Implement drag and drop using HTML5. Estimated lesson time: 20 minutes 507 To illustrate the drag and drop technique, consider the following HTML page, which defines a large square with three squares inside it.          
 
1
 
2
 
3
 
 
   This HTML document contains a 
 element whose id is called container. Inside the container are four 
 element is usually draggable by default, but a 
 element is not draggable by default. In this sample HTML document, the item is a 
 element, and its not drag- gable by default. After adding the draggable attribute, the container looks like the following. 
 
 
1
 Lesson 1: Dragging and dropping CHAPTER 13 509 
 
 
2
 
 
 
3
 
 
 
 After adding the draggable attribute to the items, you can drag them, as shown in Figure 13-2. FIGURE 13-2 The added draggable attribute, allowing the item to be dragged You can drag an item, but the item contains the no-entry symbol to indicate that the item cannot be dropped. Understanding drag events When dragging and dropping, there are events that are based on the dragged element, and there are events that are based on the drop target. Using these events, you should be able to customize the drag and drop operation as needed. The following events are based on the dragged element.  dragstart Triggers when the drag is started  drag Triggers continuously as the element is being dragged  dragend Triggers when the drag is finished