У мене є HTML object( embed), який заповнює ширину та висоту сторінки. Відповідь від @ digital-plane працює на звичайних веб-сторінках, але не, якщо користувач потрапляє на вбудований об'єкт. Тому мені було потрібно інше рішення.
Якщо ми переходимо до використання фази збору подій, ми можемо отримати події до того, як вбудований об'єкт їх отримає (помітьте trueзначення в кінці виклику слухача події):
// document.body or window
document.body.addEventListener("dragover", function(e){
e = e || event;
e.preventDefault();
console.log("over true");
}, true);
document.body.addEventListener("drop", function(e){
e = e || event;
e.preventDefault();
console.log("drop true");
}, true);
За допомогою наступного коду (на основі відповіді @ цифрової площини) сторінка стає ціллю перетягування, вона заважає вкладкам об'єктів фіксувати події, а потім завантажує наші зображення:
document.body.addEventListener("dragover", function(e){
e = e || event;
e.preventDefault();
console.log("over true");
}, true);
document.body.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
console.log("Drop true");
// begin loading image data to pass to our embed
var droppedFiles = e.dataTransfer.files;
var fileReaders = {};
var files = {};
var reader;
for (var i = 0; i < droppedFiles.length; i++) {
files[i] = droppedFiles[i]; // bc file is ref is overwritten
console.log("File: " + files[i].name + " " + files[i].size);
reader = new FileReader();
reader.file = files[i]; // bc loadend event has no file ref
reader.addEventListener("loadend", function (ev, loadedFile) {
var fileObject = {};
var currentReader = ev.target;
loadedFile = currentReader.file;
console.log("File loaded:" + loadedFile.name);
fileObject.dataURI = currentReader.result;
fileObject.name = loadedFile.name;
fileObject.type = loadedFile.type;
// call function on embed and pass file object
});
reader.readAsDataURL(files[i]);
}
}, true);
Тестовано на Firefox на Mac.