Determine if browser is drag-and-drop capable?

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


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)

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.

Tags:

Jquery

Drag And Drop

File Upload

Recent Posts