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

Question

我正在尝试制作一个网页，您可以在其中将三张图片中的一张拖放到目标图片上，根据拖放到目标上的图片，用户将被定向到不同的 link。例如，当用户将 ID 为“drag 1”的图像拖到目标图像上时，他们将被定向到我网站上的网页“portfolio-fiber”。或者，如果用户将ID为“drag 2”的图片拖拽到目标图片上，则会被引导至网页“portfolio-paint”；等等。到目前为止，我已经能够让几乎所有的东西正常工作，但是当我拖动任何图像时，它们都会将我引导到同一个网页（“portfolio-fiber”）。我是编码新手，所以我将不胜感激您能提供有关如何使不同的可拖动图像将用户引导至不同的 link 的任何建议。以下是我目前的脚本。

<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

您非常接近，您的第一个问题是您在 if 语句中分配 data 时仅使用单个 = 分配变量时输出将始终为真，这就是为什么它总是去 portfolio-fiber。其次，在进行比较时它应该是 drag 1 而不是 #drag 1，你可以通过在你的 if 语句之前放置一个 console.log(data) 来看到这一点，它会在查看时显示变量中存储的内容浏览器控制台。

我相信下面的代码块现在应该具有预期的效果。

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 语句根据拖动的对象打开不同的链接？

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

html

javascript

css

if-statement

drag-and-drop