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 & drop files here to upload' only if they can actually do that.

In the plugin code I can see a function isXHRUploadCapable which almost seems to correlate with drag & drop support, but I think that's more coincidental than anything. (It uses iFrames to post the upload rather than XMLHTTPRequest uploads for IE and Opera). Couldn't see anything that will let me know if drag-drop is supported, so I suspect it's just either an event happens or doesn't.

The docs say "Drag & Drop is not supported on the Windows version of Safari. MSIE and Opera have no support for Drag & Drop, multiple file selection or upload progress indication." So, perhaps, just the Windows version of Safari supports XMLHTTPRequest uploads, but not drag & drop?

Anyway - I am trying to figure out the best way to detect whether or not a browser will support drag & drop uploads using this plugin, and I'm not sure how I would do this. Is drag and drop functionality something I can easily test? How would I do that? Is this functionality something that's going to depend on a browser, or on whether Jquery Upload specifically supports it for that browser?

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

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)