javascript - files - Cómo detectar compatibilidad con el navegador File API drag n drop

drag and drop jquery

Question

Me gusta agregar un fondo en un div solo para navegadores que admiten arrastrar y soltar para archivos

No me gusta usar modernizr, solo un script de una línea

Answer 1

comprobación de la técnica del código fuente de modernizr para la detección de arrastrar y soltar HTML5 https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

Answer 2

¿Por qué no simplemente copiar las piezas requeridas de Modernizr?

var isEventSupported = (function() {
var TAGNAMES = {
''select'': ''input'', ''change'': ''input'',
''submit'': ''form'', ''reset'': ''form'',
''error'': ''img'', ''load'': ''img'', ''abort'': ''img''
};
function isEventSupported( eventName, element ) {
element = element || document.createElement(TAGNAMES[eventName] || ''div'');
eventName = ''on'' + eventName;
// When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
var isSupported = eventName in element;
if ( !isSupported ) {
// If it has no `setAttribute` (i.e. doesn''t implement Node interface), try generic element
if ( !element.setAttribute ) {
element = document.createElement(''div'');
}
if ( element.setAttribute && element.removeAttribute ) {
element.setAttribute(eventName, '''');
isSupported = typeof element[eventName] == ''function'';
// If property was created, "remove it" (by setting value to `undefined`)
if ( typeof element[eventName] != ''undefined'' ) {
element[eventName] = undefined;
}
element.removeAttribute(eventName);
}
}
element = null;
return isSupported;
}
return isEventSupported;
})();

Uso:

if (isEventSupported(''dragstart'') && isEventSupported(''drop'')) {
...
}

Y para File API:

var isFileAPIEnabled = function() {
return !!window.FileReader;
};

Answer 3

Puedes usar:

return ''draggable'' in document.createElement(''span'') && typeof(window.FileReader) != ''undefined'';

Answer 4

Si no quiere tratar con Modernizr en absoluto, puede simplemente replicar lo que hace para la detección de arrastrar y soltar:

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

Lo obtuve del repositorio de Modernit GitHub:

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

Answer 5

excepto que esto parece detectar incorrectamente iOS como compatible con arrastrar y soltar