Detecting HTML5 Drag And Drop support in javascript

I'm trying to detect the HTML5 Drag And Drop support in JavaScript. Modernizr seems to not handle this test case.

You can do this:

if('draggable' in document.createElement('span')) {
  alert("Drag support detected");
}

You can see a quick demo test using the above check here.

Also, there's a nice feature detection (not browser detection, yay!) list that's fairly well maintained here in case you're looking for other HTML5 features as well.

Detecting "draggable' in document.createElement('span') seems like a good idea, but in practice it doesn't work.

iOS claims that draggable is in the element but doesn't allow drag and drop. (Reference: Safari Web Content Guide: Handling Events)

IE9 claims that draggable is NOT in the element, but does allow drag and drop. (Reference: my testing HTML5 drag and drop in IE.)

Modernizr is a better choice because it doesn't confuse IE. However, it states that HTML5 drag and drop is available on iOS.

Here's how I detect HTML5 drag and drop:

var iOS = !!navigator.userAgent.match('iPhone OS') || !!navigator.userAgent.match('iPad');
if (Modernizr.draganddrop && !iOS) {
    HTML5 drag and drop solution
} else if (Modernizr.draganddrop && iOS) {
    iOS drag and drop solution 
} else {
    non-HTML5 drag and drop solution
}

This is how it's implemented in Modernizr

function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}