Lesson 2: Dragging and dropping files CHAPTER 13 519
FIGURE 13-5 The webpage with style rules appliedTo process the dropped files and display the file information in a table below the drop box,
the following JavaScript is added to the FileDragAndDrop.js file.
/// <reference path="jquery-1.8.3.js" />$(document).ready(function () {
jQuery.event.props.push('dataTransfer');
$('#target').on('dragenter', preventDefault);
$('#target').on('dragover', preventDefault);
});function preventDefault(e) {
e.preventDefault();
}In the document ready function, jQuery is set up to expose the DataTransfer object. The
dragenter and dragover events are then programmed to prevent the default operation that
prevents dropping. When the drop event is added, the dragged file can be dropped.
Next, the drop event is subscribed to, which calls the dropItem function. The dropItem
function retrieves the files collection from the DataTransfer object. The content in the file
information table is overwritten with the header, which also clears any existing informa-
tion that was in the table. Finally, a for loop is used to loop over the files and add a row
of formation to the file information table for each file. The following is the completed in
JavaScript file.