防止拖拽本地代码/项触发拖拽工具

Question

我正在构建一个HTML5文件上传，我希望有拖拽时，用户拖拽窗口上的文件触发。这个想法是，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
}

你想做检查并采取行动/不行动的地方。