520 CHAPTER 13 Drag and drop
/// <reference path="jquery-1.8.3.js" />$(document).ready(function () {
jQuery.event.props.push('dataTransfer');
$('#target').on('dragenter', preventDefault);
$('#target').on('dragover', preventDefault);
$('#target').on('drop', dropItem);
});function preventDefault(e) {
e.preventDefault();
}function dropItem(e) {
var files = e.dataTransfer.files
, $table = $('#fileInfo')
, i = 0;
$table.html(
'<thead><tr><th>Name</th><th>Type</th><th>Size</th></tr></thead>');
for (i = 0; i < files.length; i++) {
$('<tr><td>'
+ files[i].name + '</td><td>'
+ files[i].type + '</td><td>'
+ files[i].size + '</td></tr>').appendTo($table);
}
preventDefault(e);
}
Figure 13-6 shows the webpage after several files were dragged and dropped. The file
information table is populated and displayed. The first column contains the file names (with-
out a path) of the dropped files. The second column contains the file’s MIME type if the type
can be derived. The last column contains the file size in bytes.