Pregunta Evento drop de HTML5 no funciona a menos que se maneje dragover


Estoy escuchando el drop evento y haciendo e.preventDefault() Pero está tratando de abrir el archivo caído. Funcionó bien hasta ayer. Pero solo hoy se rompió por alguna razón desconocida. Hice una JsFiddle#bwquR/10 para reflejar lo mismo.

Editar:

Parece que si no tomas el dragover evento drop no puede ser manejado. incluso en el violín Si comentas el dragover No funcionará.
En el trabajo real, me perdí la ortografía de dragover Pero sigue siendo una pregunta drop no funcionará sin dragover

El violín funcionaba, pero el cuerpo era muy pequeño (solo texto DROP ahí). Estaba tomando drop evento solo en esa pequeña área donde DROP el texto no está en todo el cuerpo. Entonces pensé que no estaba funcionando. perdón por la confusion.


25
2017-12-07 10:53


origen


Respuestas:


Supongo que es porque sin el controlador de eventos dragOver, se utiliza el controlador de eventos predeterminado del evento dragOver, por lo tanto, no se desencadena ningún evento drop después de eso. Hay una necesidad con e.preventDefault para el evento dragOver antes del evento drop.


34
2017-12-07 12:57



No estoy seguro si entiendo su problema correctamente, pero si quiere leer archivos sueltos, debe manejar el evento dragover y poner al menos esta línea de código:

evt.dataTransfer.dropEffect = 'copy';

de lo contrario, dropEffect es nulo por defecto y no obtendrá ningún dato.


3
2018-01-09 10:05



https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Si desea permitir una caída, debe evitar el manejo predeterminado cancelando el evento. Puede hacer esto devolviendo false desde un detector de eventos definido por atributo o llamando al método event.preventDefault del evento. Este último puede ser más factible en una función definida en un script separado.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Llamar al método preventDefault durante un evento dragenter y dragover indicará que se permite un drop en esa ubicación. Sin embargo, comúnmente deseará llamar al método preventDefault solo en ciertas situaciones, por ejemplo, solo si se está arrastrando un enlace. Para hacer esto, llame a una función que verifique una condición y solo cancele el evento cuando se cumpla la condición. Si no se cumple la condición, no cancele el evento, y no se producirá una caída allí si el usuario suelta el botón del mouse.

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

3
2018-06-27 06:12



Funciona bien para mí ¿Está cargando esto como un HTTP o un ARCHIVO URL? Creo que debe ser una URL HTTP con Chrome.


1
2017-12-07 11:02