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