javascript - example - html draggable

El evento Drop de HTML5 no funciona a menos que se maneje Dragover

Question

Estoy escuchando el evento drop y haciendo e.preventDefault() Pero está intentando abrir el archivo e.preventDefault() . Estaba funcionando bien hasta ayer. Pero justo hoy se rompió por alguna razón desconocida. Hice un JsFiddle#bwquR/10 para reflejar lo mismo.

Editar:

Parece que si no tomas el evento dragover no se puede manejar. incluso en el violín Si comenta el dragover No funcionará.
En el trabajo real me perdí la ortografía de dragover Pero todavía es una pregunta que no funcionará sin dragover

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

Answer 1

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

Answer 2

No estoy seguro de si entiendo su problema correctamente, pero si desea leer los archivos eliminados, necesita manejar el evento de dragover y colocar 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.

Answer 3

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

Answer 4

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 falso desde un detector de eventos definido por un atributo, o llamando al método event.preventDefault del evento. Esto ú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 una caída 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);