Question

我有一个网站的部分依赖于HTML5中的拖放。我希望该网站在主页上提醒用户他们的浏览器是否支持它，我尝试使用Modernizr但没有成功。

我使用了modernizr网站创建了一个自定义文件（此实例中包含的文件已选中所有HTML5选项），但它什么也没做。我试过创造了几个但没有快乐。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.75231.js"></script>
<script>

   if(Modernizr.draganddrop){
      alert("Your browser supports drag and drop!!");
   }else{
      alert("Sorry, browser does not support drag and drop!");
   }

</script>

</head>

<body>
Some text
</body>
</html>

我错过了什么吗？

由于

为了更新，我再次创建了modernizr文件以包含所有CSS选项，现在它检测到每个浏览器，包括7拖放兼容

js/modernizr.custom.18141.js

Answer 1

我改变了

if(Modernizr.draganddrop)

到

if (window.FileReader && Modernizr.draganddrop)

然后它运作良好

Answer 2

它有点棘手。 iOS7报告它支持FileReader和draganddrop图片上传。由于我正在寻找一个我不能用iOS做的更通用的文件上传，我需要另一个答案。

在here处的Modernizr第57期谈论这个问题。现在有了Windows 8以及触摸和鼠标，这很棘手。我成功使用了chriskeeble中间的代码。它依赖于Modernizr和代理检测。

Answer 3

Modernizr 在 Windows-Safari v5.1.7 中返回拖放的误报（最新 - 现在看起来是最终版本！）。这并不奇怪，因为（我被告知）以前的版本（v5.0.x）具有功能性阻力和功能。丢弃基础设施（Modernizr检测到）。 Modernizr不会轻易发现事件失火错误（这表明正确的检测方案可能需要包含一些url数据库查询）。

注意：Safari v5.1.7不会触发ondrop事件（相反，它倾向于歪曲一场错误的ondragleave事件，这几乎肯定会破坏任何代码可兑换的努力来解决这个bug。如果你转向jquery来修复一个版本的浏览器，你也可以在没有它的情况下放弃javascript。

我曾希望（完全没有希望） Modernizr 检测可能启用一些聪明的补救措施，但是苹果从Windows Safari（错误，imho）获取支持，我＆＃ 39;我想知道为什么现有的基础设施迫使开发商支持有缺陷的产品;正确的补救措施是完全回忆版本，开发人员的责任是在用户使用具有已知缺陷的浏览器版本时提醒用户 - 即使每个浏览器都是如此（注意：应该是每个版本）每个浏览器都证明有缺陷，需要更好的规格）。

使用Modernizr检测拖放

3 个答案: