Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

510 CHAPTER 13 Drag and drop

</div>

<div id="hole2" class="hole">

<div id="item2" draggable="true" class="item">2</div>

</div>

<div id="hole3" class="hole">

<div id="item3" draggable="true" class="item">3</div>

</div>

<div id="hole4" class="hole"></div>

</div>

After adding the draggable attribute to the items, you can drag them, as shown in

Figure 13-2.

FIGURE 13-2 he added draggable attribute, allowing the item to be draggedT

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 riggers when the drag is finishedT