使用 Modernizr 检测拖放答案

【问题标题】：Using Modernizr to detect drag and drop使用 Modernizr 检测拖放
【发布时间】：2012-11-04 23:57:09
【问题描述】：

我有一个网站部分依赖于 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 选项，现在它检测到包括 ie 7 在内的所有浏览器作为拖放兼容

js/modernizr.custom.18141.js

【问题讨论】：

标签： html

【解决方案1】：

我变了

if(Modernizr.draganddrop)

到

if (window.FileReader && Modernizr.draganddrop)

然后效果很好

【讨论】：

也检查这个答案 - stackoverflow.com/a/19551180/28321 Modernizr 2.6.x 在非核心检测下对文件读取器进行了测试

【解决方案2】：

它有点棘手。 iOS7 报告它同时支持 FileReader 和拖放图片上传。由于我正在寻找一个更通用的文件上传，而我无法在 iOS 上完成，我需要另一个答案。

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

【讨论】：

【解决方案3】：

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

注意：Safari v5.1.7 不会触发 ondrop 事件（相反，它倾向于错误触发了一个错误的 ondragleave 事件，这几乎肯定会破坏解决此错误的任何代码可赎回的努力。如果你转向 jquery 来修复一个浏览器的一个版本，你还不如放弃 javascript 没有它。

我曾希望（完全没有希望）Modernizr 检测可能能够实现一些巧妙的补救措施，但随着苹果从 Windows Safari 中撤出支持（错误，恕我直言），我'我想知道为什么目前的基础设施迫使开发人员支持有缺陷的产品；正确的补救措施是完全召回版本，开发人员的责任是在用户使用存在已知缺陷的浏览器版本时提醒用户——即使是每个浏览器（注意：每个浏览器的每个版本都应该证明有缺陷，要求更好的规格）。

【讨论】：