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

除了克里斯蒂安的解决方案，这可以缩短为：

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

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

Answer 3

除了JimmyBlu的解决方案外，还可以简化为：

$('selector').on('dragover drop', false);

jQuery.on（“drop”）没有开火

3 个答案: