Javascript 如何使用带有拖放功能的if语句根据拖动的对象打开不同的链接？

我正在尝试制作一个网页，您可以将三个图像中的一个拖放到目标图像上，根据拖放到目标图像上的图像，用户将被定向到不同的链接。 例如，当用户将ID为“drag 1”的图像拖动到目标图像上时，他们将被定向到我的网站上的网页“portfolio fiber”。或者，如果用户将ID为“drag 2”的图像拖动到目标图像上，则将其定向到网页“portfolio paint”；等等 到目前为止，我已经能够让几乎所有的工作，但当我拖动任何的图像，他们都指向同一个网页（“组合纤维”）。 我是新的编码，所以我将非常感谢你能提供任何建议，关于如何使不同的可拖动图像直接用户到不同的链接。下面是我到目前为止的脚本

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

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
如果（数据=“#拖动1”）{
window.open（'portfolio-fiber'，'u self'，false）。单击（）；
}
否则如果（数据=“#拖动2”）{
打开（'portfolio-paint'，'u self'，false）。单击（）；
}
否则如果（数据=“#拖动3”）{
window.open（'portfolio-other'，'u self'，false）。单击（）；
}
}
将要查看的媒体拖到画布上：

您非常接近，您的第一个问题是在if语句中仅使用单个

=

来分配

数据，分配变量时，输出将始终为真，这就是为什么它总是转到组合光纤。其次，在进行比较时，应该是
拖动1
而不是
#拖动1
，您可以通过将
控制台.log（data）
放在if语句之前看到这一点，该语句将在查看浏览器控制台时显示变量中存储的内容

我相信下面的代码块现在应该达到了预期的效果

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();
  }
}

您非常接近，您的第一个问题是在if语句中分配
数据
，只使用一个
=
分配变量时，输出将始终为真，这就是为什么它总是转到组合光纤的原因。其次，在进行比较时，应该是
拖动1
而不是
#拖动1
，您可以通过将
控制台.log（data）
放在if语句之前看到这一点，该语句将在查看浏览器控制台时显示变量中存储的内容

我相信下面的代码块现在应该达到了预期的效果

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();
  }
}

“拖放”通常是一个事件（功能），你会把它放在适当的位置。这是在拖，你会有一个函数，响应这一点。在drop事件中，还有另一个函数。查看“事件侦听器”。“拖放”通常是一个您将放置到位的事件（函数）。这是在拖，你会有一个函数，响应这一点。在drop事件中，还有另一个函数。查看“事件侦听器”。