var drop = document.getElementById("dropArea"); // drop.addEventListener("drop", function(event) { drop.style.backgroundColor = "#ccc"; // var filelist = event.dataTransfer.files; for (var i = 0; filelist.length; i++) { if (window.FileReader && (filelist[i].type == "text/plain")) { var reader = new FileReader(); reader.readAsText(filelist[i]); reader.onload = function(event) { drop.innerHTML = event.target.result; } } } }, true); // drop.addEventListener("dragenter", function(event) { event.preventDefault(); drop.style.backgroundColor = "#ecc"; }, true); // drop.addEventListener("dragleave", function(event) { event.preventDefault(); drop.style.backgroundColor = "#ccc"; }, true); // drop.addEventListener("dragover", function(event) { event.preventDefault(); }, true); // window.addEventListener("drop", function(event) { event.preventDefault(); }, true); // window.addEventListener("dragenter", function(event) { event.preventDefault(); }, true); // window.addEventListener("dragleave", function(event) { event.preventDefault(); }, true); // window.addEventListener("dragover", function(event) { event.preventDefault(); }, true);
<div id="dropArea"></div>
div#dropArea{ width:400px; height:300px; background-color:#ccc; }