Question

How do I accurately determine which drop zone the file was dropped into?

Background

I’m creating an HTML page with vanilla JavaScript that has 2 drop zones for 2 different file types, and depending on which drop zone the file is sent to, the files should ultimately be sent to a different endpoint.

Drop Zone 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

I won’t put in all the boilerplate stuff like preventDefaults, but I’ll show the drop handler function

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

Problem

Depending on if I release the drag in the div, the form, or the p, I get different values for e.target.id

For example, if I add a console.log(e.target.id), I can get the following values depending on where I do the actual drop:

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

So what value in the event can I use to say regardless of where the drop occurs that it happened in drop?

Current solution

The only way I’ve managed to get it to work consistently is by using e.target.innerText which feels like a hack.