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

Posted 2023-05-08

【中文标题】jQuery.on("drop") 没有触发

【英文标题】：jQuery.on("drop") not firing

【发布时间】：2013-10-13 22:31:43

【问题描述】：

我正在尝试将文件从桌面拖放到浏览器窗口。我使用 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 进行测试。

【问题讨论】：

重复问题：***.com/questions/21339924/…

潜在答案：***.com/questions/8414154/…

【参考方案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!");
);

【讨论】：

对于任何关注的人；它额外取消了“dragover”，导致下降然后触发。取消 dragenter 和 dragleave 是不够的。正如@Christian 所说，您必须全部取消。

您能否补充说明为什么我需要删除/取消 CSS

如果你的意思是 "$(this).removeClass('dragging')" 语句，这只是 OP 在拖动时设置页面样式的方式。它与拖放操作无关。

既然我先用谷歌在这里结束，也许看看this 答案，以及MDN 的引用链接以及解释为什么你必须取消事件！

确保您等待 DOM 被首先加载。我没有。经典错误。

【参考方案2】：

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

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

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

【讨论】：

如何获取拖到放置区的元素？例如拖到区域的文件？

2020 和这个答案中的一条单行评论为我节省了很多麻烦