HTML5 DragNDrop - 拖放事件永不会触发

Question

我正在尝试为Web应用程序实现drag'n'drop上传输入。检测拖动开始和结束以及合适的拖放目标样式可以完美地工作，尽管只要将目标上的图像文件拖放到浏览器中即可。我知道这经常被问到，但我还没找到解决方案。

我所看到的是：听众dragenter,dragstart和dragend正确着火，而drop没有。请参阅下面的代码：

（注：app对象只是一个简单的自定义的抽象对象，没什么特别的关于它的app.on方法调用addEventListener，重视包装在一个try-catch块的事件。）

附加的事件

各个事件

app.events.startedDragging = function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    return false; 
}; 

app.events.isDragging = function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    app.elements.pictureDropArea.classList.add('dragged-over'); 
    return false; 
}; 

app.events.stoppedDragging = function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    app.elements.pictureDropArea.classList.remove('dragged-over'); 
    return false; 
}; 

app.events.isDropped = function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    console.log('drop event fired.'); 

    var file = event.dataTransfer.files[ 0 ]; 

    console.log(file); 
    return false; 
}; 

Answer 1

当我施加相同的事件到body无意中发现它。好像有需要的侦听器dragover在文档主体与通常preventDefault和stopPropagation东西：

app.on('dragover', document.body, function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    return false; 
}); 

上帝，我恨这个API这么多...