CHAPTER 9  WORKING WITH DRAG-AND-DROP

message += "size: " + file.size + " bytes - "; message += "modified: " + file.lastModifiedDate; message += "</li>";

});

message += "</ol>";

setStatus(message); droptarget.className = "validtarget";

return false;

}

As discussed previously, it is necessary to cancel the event using preventDefault so that the browser’s default drop code is never triggered.

Then, because we have more access to data in the drop handler than during the drag, we can inspect the files attached to the dataTransfer and discover the characteristics of the dropped files. In our example, we will merely display the properties of the files, but with full use of the HTML5 File API, you can read in the contents for local display or upload them to the server powering your application.

Practical Extras

Sometimes there are techniques that don’t fit into our regular examples but which nonetheless apply to many types of HTML5 applications. We present to you a short, but common, practical extra here.

Customizing the Drag Display

Usually, the browser will default the visual cursor indicator for a drag operation. An image or link will move with the cursor (sometimes sized down for practical viewing), or a ghosted image of the dragged element will hover at the drag position.

However, if you need to change the default drag image display, the API provides you with a simple API for doing just that. It is only possible to change the drag image during the dragstart handler—once again due to security concerns—but you can do so easily by simply passing the element that represents the appearance of the cursor to the dataTransfer.

var dragImage = document.getElementById("happyTrails"); evt.dataTransfer.setDragImage(dragImage, 5, 10);

Note the offset coordinates passed to the setDragImage call. These x and y coordinates tell the browser which pixel inside the image to use as the point underneath the mouse cursor. For example, by passing in the values 5 and 10 for x and y, respectively, the image will be positioned such that the cursor is 5 pixels from the left and 10 pixels from the top, as shown in Figure 9-6.

239