CHAPTER 9  WORKING WITH DRAG-AND-DROP

Figure 9-3. Drag-and-drop event flow

Drag Participation

Now that you’ve seen the different events that can be triggered during a drag-and-drop operation, you might be wondering what it takes to mark elements in your web application as draggable. That’s easy!

Aside from a few elements—such as text controls—elements in a page are not draggable by default. In order to mark a specific element as draggable, however, all you need to do is add one attribute: draggable.

<div id=”myDragSource” draggable=”true”>

Simply by adding that attribute, you cause the browser to fire the aforementioned events. Then, you only need to add the event handlers to manage them.

Transfer and Control

Before we move into our example, let’s assess the dataTransfer object in more detail. The dataTransfer is available from every drag-and-drop event, as shown in Listing 9-1.

Listing 9-1. Retrieving the dataTransfer Object

Function handleDrag(evt) {

var transfer = evt.dataTransfer; // …

}

224