jQuery.on("drop") 没有触发

Question

我正在尝试将文件从桌面拖放到浏览器窗口。我使用 jQuery 将三个事件附加到 HTML 元素，如下面的代码所示：

$("html").on("dragover", function() {
    $(this).addClass('dragging');
});

$("html").on("dragleave", function() {
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

'dragover' 和 'dragleave' 事件工作正常，当我将文件拖到上方时会在整个页面周围显示一个嵌入边框，如果我再次将文件拖出，则会将其移除。

但是，'drop' 事件似乎根本没有触发，拖放的文件只是在浏览器窗口中打开。

有人知道为什么这个事件没有触发吗？

顺便说一句，我正在使用最新版本的 Chrome 并使用 jQuery 1.10.2 进行测试。

Answer 1

你需要取消所有事件

$("html").on("dragover", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).addClass('dragging');
});

$("html").on("dragleave", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

Answer 2

除了 Christian 的解决方案之外，还可以缩短为：

$('#my-dropzone')
    // crucial for the 'drop' event to fire
    .on('dragover', false) 

    .on('drop', function (e) {
        // do something
        return false;
    });