0

I have a section of a website that relies on drag and drop in HTML5. I would like the site to alert the user on the home page whether their browser supports it and I have tried to use Modernizr but without success.

I have used the modernizr site to create a custom file (the one included in this instance has all HTML5 options selected) but it does nothing. I have tried creating several but with no joy.

    <!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>

Am I missing something?

Thanks

Just to update, I have created the modernizr file again to include all of the CSS options and now it detects every browser including ie 7 as drag and drop compatible

js/modernizr.custom.18141.js
tatty27
  • 1,553
  • 4
  • 34
  • 73

3 Answers3

1

I changed 

if(Modernizr.draganddrop)

to 

if (window.FileReader && Modernizr.draganddrop)

and then it worked fine

tatty27
  • 1,553
  • 4
  • 34
  • 73
  • Check this answer too - http://stackoverflow.com/a/19551180/28321 Modernizr 2.6.x has test for filereader under non-core detects – aunlead Feb 11 '14 at 07:27
0

Its a bit trickier. iOS7 reports that it supports both FileReader and draganddrop pictures uploading. Since I was looking for a more general file upload that I couldn't do with iOS, I needed another answer.

Modernizr issue 57 at here talks about the issue. Now with windows 8 and both touch and mouse, its tricky. There's code in the middle by chriskeeble that I used successfully. It relies on Modernizr and agent detection.

Mark Kasson
  • 1,600
  • 1
  • 15
  • 28
0

Modernizr returns a false-positive for Drag and Drop in Windows-Safari v5.1.7 (latest -- and now looking to be the final version!). This is not surprising, since (I am told) previous versions (v5.0.x) had functional drag & drop infrastructure (which Modernizr detects). Modernizr will not easily discover an event misfire bug (which suggests to me that a correct detection scheme may need to incorporate some url database query).

Note: Safari v5.1.7 does not fire an ondrop event (instead, it tends to misfire a false ondragleave event, which almost certainly undermines any code-redeemable effort to workaround this bug. If you turn to jquery to fix one version of one browser, you may as well surrender javascript without it.

I had hoped (against all hope) that Modernizr detection might enable some clever remedy, but with apple pulling support from Windows Safari (blunder, imho), I'm left wondering why the present infrastructure compels developers to support defective products; the proper remedy is a full recall of the version, and the responsibility of developers is to alert users when they are using a version of a browser with a known defect -- even if that's every browser (note: should every version of every browser prove defective, demand a better specification).

Ivan D. Proof
  • 1
  • 3