12.5 Drag and Drop with the “draggable” Attribute 285Figure 12.4 Drag and drop in combination with “FileAPI”
Let’s begin by preparing the drop zone. You can see it on the right in the
screen shot of Figure 12 .4. It consists of the Unicode symbol PREVIOUS PAGE
(⎗), some CSS instructions, and the event listener attributes required for
drag and drop:
<div ondragenter="return false;"
ondragover="return false;"
ondrop="drop(event)">⎗
As soon as an image is dragged from the desktop to this area, the dropped image
can be accessed in the callback function drop() via the dataTransfer object:
var drop = function(evt) {
var file = evt.dataTransfer.files[0];
};
From now on we are within the FileAPI, because the attribute files represents
a so-called FileList object that is an array of all file objects involved in the cur-
rent drag-and-drop operation. Although the demo by Paul Rouget allows the
loading of several images simultaneously, you can only drop one image at a time
into the drop zone in our example. So the reference to this file is always to be
found in files[0].