防止拖动本地代码/项目触发draenter

Question

我正在构建一个 HTML5 文件上传，我希望在用户将文件拖到窗口上时触发 dragenter。这个想法是 dragenter 将触发灯箱样式覆盖，显示放置区域。

这是我的代码。 (jQuery)

$(window).bind('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $('#uploadWrapper').show();
}).bind('dragexit', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $('#uploadWrapper').hide();
});

这很好用，但是如果用户抓取图像或一些文本并拖动它，它也会触发 dragenter 事件。有没有办法告诉我正在拖动什么，所以只有实际文件上传触发显示覆盖？

谢谢..

Answer 1

我认为像下面这样的东西应该可以工作； （虽然我认为它对 Opera 不友好。）

function DraggedFiles(e)
{
    for (n in e.dataTransfer.types)
    {
        if (e.dataTransfer.types[n] === "Files") return true;
    }

    return false;
}

然后，对于您的 dragEnter 事件，只需添加：

if (DraggedFiles(e))
{
    // files were dragged onto here
} else {
    // something other than files were dragged
}

您要在哪里进行检查并采取行动/不采取行动。