Pregunta

¿Cómo puedo determinar con precisión en qué zona de colocación se colocó el archivo?

Fondo

Estoy creando una página HTML con JavaScript estándar que tiene 2 zonas de colocación para 2 tipos de archivos diferentes y, según la zona de colocación a la que se envíe el archivo, los archivos deberían enviarse finalmente a un punto final diferente.

Zona de caída HTML

 <div class="drop-area" id="drop-area-1" > <form class="my-form" id="form-1"> <p id="p-1">Drop Area 1</p> </form> </div> <div class="drop-area" id="drop-area-2" > <form class="my-form" id="form-2"> <p id="p-2">Drop Area 2</p> </form> </div>

JavaScript

No pondré todas las cosas repetitivas como preventDefaults , pero mostraré la función del controlador de caída

 function handleDrop(e) { var dt = e.dataTransfer; var files = dt.files; let fileType = e.target.innerText; handleFiles(files, fileType) }

Problema

Dependiendo de si suelto el arrastre en div , form o p , obtengo diferentes valores para e.target.id

Por ejemplo, si agrego un console.log(e.target.id) , puedo obtener los siguientes valores dependiendo de dónde realice la caída real:

• drop-area-1 / drop-area-2
• form-1 / form-2
• p-1 / p-2

Entonces, ¿qué valor en el event puedo usar para decir, independientemente de dónde ocurra la caída, que sucedió en la caída?

Solución actual

La única forma en que he logrado que funcione de manera consistente es mediante el uso de e.target.innerText que se siente como un truco.