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

这样可以正常工作，但是如果用户抓取图像或某些文本并将其拖动，它也会触发戏剧性事件。有没有办法可以告诉你什么被拖动，所以只有上传的实际文件触发显示叠加？

谢谢..

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
}

您要进行检查并执行操作/不作为。

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

1 个答案: