How can I use if-statements with drag-and-drop to open different links depending on the object that is dragged?

Question

I am trying to make a webpage where you can drag and drop one of three images onto a target image, and depending on the image that is dragged and dropped onto the target, the user will be directed to a different link. For example, when the user drags the image with the ID "drag 1" onto the target image, they are directed to the webpage "portfolio-fiber" on my website. Alternatively, if the user drags the image with the ID "drag 2" onto the target image, they are directed to the webpage "portfolio-paint"; and so on. So far, I've been able to get almost everything to work, but when I drag any of the images, they all direct me to the same webpage ("portfolio-fiber"). I am new to coding, so I would greatly appreciate any advice you can provide about how to make different draggable images direct the user to different links. Below is the script I have so far.

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  if (data = "#drag 1"){
    window.open('portfolio-fiber', '_self',false).click();
  }
  else if (data = "#drag 2"){
    window.open('portfolio-paint', '_self',false).click();
  }
else if (data = "#drag 3"){
    window.open('portfolio-other', '_self',false).click();
  }
}
</script>

<p>DRAG THE MEDIA YOU WANT TO VIEW ONTO THE CANVAS:</p>

<br><div grid-row="" grid-pad="1" grid-gutter="2">
    <div grid-col="x10" grid-pad="1"><h1><a href="portfolio-fiber" rel="history" class="image-link"><img id="drag 1" src="https://freight.cargo.site/t/original/i/75d59481ec447dc026afb6cd41f92f877969c06e56f8e02dc558223481e2897c/knit-text.png" draggable="true" ondragstart="drag(event)" width="600" height="377" style="width: 381.368px; height: 239.626px;"></a></h1></div>
    <div grid-col="x10" grid-pad="1"><h1><a href="portfolio-paint" rel="history" class="image-link"><img id="drag 2" src="https://freight.cargo.site/t/original/i/5e3c09e37a3f9d01243b5541e3d573bedbbf74c0008d1e69cb23ce7537db1171/paint-text.png" draggable="true" ondragstart="drag(event)" width="600" height="377" style="width: 381.368px; height: 239.626px;"></a></h1></div>
    <div grid-col="x10" grid-pad="1"><h1><a href="portfolio-other" rel="history" class="image-link"><img id="drag 3" src="https://freight.cargo.site/t/original/i/5e3c09e37a3f9d01243b5541e3d573bedbbf74c0008d1e69cb23ce7537db1171/other-text.png" draggable="true" ondragstart="drag(event)" width="600" height="377" style="width: 381.368px; height: 239.626px;"></a></h1></div>
    

<img id="div1" src="https://freight.cargo.site/t/original/i/d1c107906d7f35add9185f9993ca8148a6993a62477439b5012301ea45bff32b/Asset-1.png" ondrop="drop(event)" ondragover="allowDrop(event)">
<br>

Answer 1

You were very close, your first problem was you were assigning data in your if statement by only using a single = when assigning a variable the output will always be true, which is why it always went to portfolio-fiber. Secondly it should be drag 1 not #drag 1 when doing the comparison, you can see this by putting a console.log(data) before your if statements which will show you what is stored in the variable when looking at the browser console.

I believe the code block below should now have the desired effect.

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  if (data == "drag 1"){
    window.open('portfolio-fiber', '_self',false).click();
  }
  else if (data == "drag 2"){
    window.open('portfolio-paint', '_self',false).click();
  }
else if (data == "drag 3"){
    window.open('portfolio-other', '_self',false).click();
  }
}