Detección de compatibilidad con arrastrar y soltar HTML5 en javascript

Question

Estoy intentando detectar el soporte de arrastrar y soltar HTML5 en JavaScript. Modernizr parece no manejar este caso de prueba.

Answer 1

Usted puede hacer esto:

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

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

También, there's a nice feature detection (not browser detection, yay!) list that's fairly well maintained here en caso de que esté buscando otras características de HTML5 también.

Answer 2

La detección de "arrastrable' en document.createElement ('período') parece una buena idea, pero en la práctica no funciona.

iOS afirma que arrastrable está en el elemento, pero no permite arrastrar y soltar (Referencia: Safari Web Content Guide: Handling Events)..

IE9 afirma que se pueda arrastrar no está en el elemento, pero permite arrastrar y soltar (Referencia: mi arrastre prueba HTML5 y caída de la IE.)

Modernizr es una mejor elección porque no confunde IE. Sin embargo, indica que HTML5 arrastrar y soltar está disponible en iOS.

Así es como detecto HTML5 arrastrar y soltar:

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 
} 

Answer 3

Compruebe si "dragstart" y "caída" son compatibles, utilizando el método de "isEventSupported" en Modernizr. Ver How to detect browser support File API drag n drop.

Answer 4

Esta es la forma en que está implementado en Modernizr

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