<!DOCTYPE html>
<html>
<body>
<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>
<div id="holder"></div>
<script>
// prevent default behavior from changing page on dropped file
window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragleave = function () { this.className = ''; return false; };
holder.addEventListener("drop", abc);
function abc (e) {
console.log("Bam!")
e.preventDefault();
console.log(e)
for (var i = 0; i < e.dataTransfer.files.length; ++i) {
console.log(e.dataTransfer.files[i].path);
}
return false;
};
</script>
</body>
</html>
var holder = document.getElementById('holder'); //Равна nulldocument.addEventListener("DOMContentLoaded", function(){
var holder = document.querySelector("#holder")
window.ondragover = window.ondragleave = function(e){e = e||event;
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
if((e.currentTarget||e.srcElement)===holder) holder.classList.toggle("hover");
};
holder.ondrop = function(e){
e = e||event;
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
alert(e.dataTransfer.files.length);
};
});