Evitar que el navegador cargue un archivo de arrastrar y soltar

Estoy agregando un cargador html5 de arrastrar y soltar a mi página.

Cuando un archivo se deja caer en el área de carga, todo funciona muy bien.

Sin embargo, si accidentalmente dejo caer el archivo fuera del área de carga, el navegador carga el archivo local como si fuera una página nueva.

¿Cómo puedo prevenir este comportamiento?

¡Gracias!

Puede agregar un detector de eventos a la ventana que llama preventDefault()a todos los eventos de dragover y drop.
Ejemplo:

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

Después de mucho jugar, descubrí que esta es la solución más estable:

var dropzoneId = "dropzone";

window.addEventListener("dragenter", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
}, false);

window.addEventListener("dragover", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

window.addEventListener("drop", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

<div id="dropzone">...</div>

Establecer ambos effectAllowe dropEffectincondicionalmente en la ventana hace que mi zona de colocación ya no acepte ningún dnd, independientemente de si las propiedades se configuran como nuevas o no.

Para jQuery la respuesta correcta será:

$(document).on({
    dragover: function() {
        return false;
    },
    drop: function() {
        return false;
    }
});

Aquí return falsese comportará como event.preventDefault()y event.stopPropagation().

Para permitir arrastrar y soltar solo en algunos elementos, puede hacer algo como:

window.addEventListener("dragover",function(e){
  e = e || event;
  console.log(e);
  if (e.target.tagName != "INPUT") { // check which element is our target
    e.preventDefault();
  }
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  console.log(e);
  if (e.target.tagName != "INPUT") {  // check which element is our target
    e.preventDefault();
  }  
},false);

prueba esto:

document.body.addEventListener('drop', function(e) {
    e.preventDefault();
}, false);

La prevención de todas las operaciones de arrastrar y soltar de forma predeterminada puede no ser lo que desea. Es posible verificar si la fuente de arrastre es un archivo externo, al menos en algunos navegadores. He incluido una función para verificar si la fuente de arrastre es un archivo externo en esta respuesta de StackOverflow .

Modificando la respuesta de Digital Plane, podría hacer algo como esto:

function isDragSourceExternalFile() {
     // Defined here: 
     // https://stackoverflow.com/a/32044172/395461
}

window.addEventListener("dragover",function(e){
    e = e || event;
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
    if (IsFile) e.preventDefault();
},false);
window.addEventListener("drop",function(e){
    e = e || event;
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
    if (IsFile) e.preventDefault();
},false);

Nota: Aunque el OP no solicitó una solución angular, vine aquí buscando eso. Entonces, esto es para compartir lo que encontré como una solución viable, si usa Angular.

En mi experiencia, este problema surge primero cuando agrega la funcionalidad de caída de archivos a una página. Por lo tanto, mi opinión es que el componente que agrega esto, también debería ser responsable de prevenir la caída fuera de la zona de caída.

En mi solución, la zona de colocación es una entrada con una clase, pero cualquier selector inequívoco funciona.

import { Component, HostListener } from '@angular/core';
//...

@Component({
  template: `
    <form>
      <!-- ... -->
      <input type="file" class="dropzone" />
    </form>
  `
})
export class MyComponentWithDropTarget {

  //...

  @HostListener('document:dragover', ['$event'])
  @HostListener('drop', ['$event'])
  onDragDropFileVerifyZone(event) {
    if (event.target.matches('input.dropzone')) {
      // In drop zone. I don't want listeners later in event-chain to meddle in here
      event.stopPropagation();
    } else {
      // Outside of drop zone! Prevent default action, and do not show copy/move icon
      event.preventDefault();
      event.dataTransfer.effectAllowed = 'none';
      event.dataTransfer.dropEffect = 'none';
    }
  }
}

Los oyentes se agregan / eliminan automáticamente cuando se crea / destruye el componente, y otros componentes que usan la misma estrategia en la misma página no interfieren entre sí debido a stopPropagation ().

Para construir sobre el método "verificar el objetivo" descrito en algunas otras respuestas, aquí hay un método más genérico / funcional:

function preventDefaultExcept(predicates) {
  return function (e) {
    var passEvery = predicates.every(function (predicate) { return predicate(e); })
    if (!passEvery) {
      e.preventDefault();
    }
  };
}

Llamado como:

function isDropzone(e) { return e.target.id === 'dropzone'; }
function isntParagraph(e) { return e.target.tagName !== 'p'; }

window.addEventListener(
  'dragover',
  preventDefaultExcept([isDropzone, isntParagraph])
);
window.addEventListener(
  'drop',
  preventDefaultExcept([isDropzone])
);

Tengo un HTML object( embed) que llena el ancho y el alto de la página. La respuesta de @ digital-plane funciona en páginas web normales, pero no si el usuario cae sobre un objeto incrustado. Entonces necesitaba una solución diferente.

Si cambiamos al uso de la fase de captura de eventos , podemos obtener los eventos antes de que el objeto incrustado los reciba (observe el truevalor al final de la llamada de escucha de eventos):

// document.body or window
document.body.addEventListener("dragover", function(e){
  e = e || event;
  e.preventDefault();
  console.log("over true");
}, true);

document.body.addEventListener("drop", function(e){
  e = e || event;
  e.preventDefault();
  console.log("drop true");
}, true);

Usando el siguiente código (basado en la respuesta de @ digital-plane) la página se convierte en un objetivo de arrastre, evita que las incrustaciones de objetos capturen los eventos y luego carga nuestras imágenes:

document.body.addEventListener("dragover", function(e){
  e = e || event;
  e.preventDefault();
  console.log("over true");
}, true);

document.body.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
  console.log("Drop true");

  // begin loading image data to pass to our embed
  var droppedFiles = e.dataTransfer.files;
  var fileReaders = {};
  var files = {};
  var reader;

  for (var i = 0; i < droppedFiles.length; i++) {
    files[i] = droppedFiles[i]; // bc file is ref is overwritten
    console.log("File: " + files[i].name + " " + files[i].size);
    reader = new FileReader();
    reader.file = files[i]; // bc loadend event has no file ref

    reader.addEventListener("loadend", function (ev, loadedFile) {
      var fileObject = {};
      var currentReader = ev.target;

      loadedFile = currentReader.file;
      console.log("File loaded:" + loadedFile.name);
      fileObject.dataURI = currentReader.result;
      fileObject.name = loadedFile.name;
      fileObject.type = loadedFile.type;
      // call function on embed and pass file object
    });

    reader.readAsDataURL(files[i]);
  }

}, true);

Probado en Firefox en Mac.

Estoy usando un selector de clase para múltiples áreas de carga, por lo que mi solución tomó esta forma menos pura

Basado en la respuesta de Axel Amthor, con dependencia de jQuery (alias a $)

_stopBrowserFromOpeningDragAndDropPDFFiles = function () {

        _preventDND = function(e) {
            if (!$(e.target).is($(_uploadBoxSelector))) {
                e.preventDefault();
                e.dataTransfer.effectAllowed = 'none';
                e.dataTransfer.dropEffect = 'none';
            }
        };

        window.addEventListener('dragenter', function (e) {
            _preventDND(e);
        }, false);

        window.addEventListener('dragover', function (e) {
            _preventDND(e);
        });

        window.addEventListener('drop', function (e) {
            _preventDND(e);
        });
    },