Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 200

var li,
file,
fileInfo;
fileList.innerHTML = "";
for (var i = 0, fl = files.length; i < fl; i++) {
li = document.createElement("li");
file = files[i];
fileInfo = file.name; // Name
fileInfo += " (" + file.type + "), "; // Type
fileInfo += file.size + " bytes"; // Size
li.innerHTML = fileInfo;
fileList.appendChild(li);
};
};
filesUpload.onchange = function () {
fileTransfer(this.files);
};
dropArea.ondragenter = function () {
return false;
};
dropArea.ondragover = function () {
return false;
};
dropArea.ondrop = function (evt) {
fileTransfer(evt.dataTransfer.files);
return false;
};
})();
</script>
The division representing the drop area in the previous example ( <div id="drop"> ) should be styled either with
a border or with a background color to make it visible (Listing 6-9).
Listing 6-9. CSS Ruleset for the Previous Example
#drop {
border: 2px dashed #f00;
padding: 10px;
}
Next, create a very simple drag-and-drop example with five words that can be dragged from one division to
another and back. First, declare the div items and make them draggable with the draggable attribute. Then, put them
into a container div and create the second div (the target) (Listing 6-10).