Determine if browser is drag-and-drop capable?

Question

I\'m implementing jQuery File Upload and trying to figure out the best way to detect whether the client can support drag & drop so I can render something like \'Drag &am

Answer 1

Modernizr is the de-facto browser support detection plugin and supports drag-and-drop detection.

In Modernizr 1.5, we test for the following drag events:

• drag
• dragstart
• dragenter
• dragover
• dragleave
• dragend
• drop

Source

Answer 2

The current version of Modernizr, 2.6.2, includes a test for FileReader.

Modernizr.filereader && Modernizr.draganddrop

The filereader test is under the Non-core detects section. draganddrop is in the HTML5 section. Visit the Modernizr download page.

Answer 3

I am in the same issue and tried with checking both window.FileReader && Modernizr.draganddrop as you said. This is my test output:

IE window.FileReader==undefined && Modernizr.draganddrop==true
OPERA window.FileReader==window.FileReader && Modernizr.draganddrop==false
CHROME window.FileReader==window.FileReader && Modernizr.draganddrop==true
FIREFOX window.FileReader==window.FileReader && Modernizr.draganddrop==true
SAFARI window.FileReader==undefined && Modernizr.draganddrop==true

So, your condition takes out the D&D non-supported browsers IE and OPERA. But it additionally drops SAFARI which supports drag and drop.

In this case we can add jQuery.browser checking too to drop IE and OPERA.

Answer 4

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 heretalks about the issue. Now with windows 8 allowing 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.

Answer 5

Modernizr 3.0.0 dropped draganddrop detection because it was unreliable: https://github.com/Modernizr/Modernizr/blob/master/CHANGELOG.md#v300

Per https://github.com/Modernizr/Modernizr/issues/57#issuecomment-35831605 you can use the Wordpress approach as a workaround:

var draganddrop = "draggable" in document.createElement("div") && !/Mobile|Android|Slick\/|Kindle|BlackBerry|Opera Mini|Opera Mobi/i.test(navigator.userAgent)