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

2022-01-11 00:00:00 drag-and-drop jquery javascript

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

I'm trying to implement drag and dropping of files from the desktop the browser window. I have used jQuery to attach three events to the HTML element as in the code below:

$("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' 事件工作正常，当我将文件拖到上方时会在整个页面周围显示一个嵌入边框，如果我再次将文件拖出则将其删除.

The 'dragover' and 'dragleave' events work fine, displaying an inset border around the entire page when I drag a file over an removing it if I drag the file out again.

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

However, the 'drop' event doesn't seem to fire at all, the dropped file simply opens in the browser window.

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

Does anyone have any idea why this event is not firing?

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

Btw, I am testing this in the latest version of Chrome and using jQuery 1.10.2.

推荐答案

你需要取消所有事件

$("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!");
});

相关文章