Как я могу использовать операторы if с перетаскиванием для открытия различных ссылок в зависимости от перетаскиваемого объекта?

Question

Я пытаюсь создать веб-страницу, на которой вы можете перетащить одно из трех изображений на целевое изображение, и в зависимости от изображения, которое перетаскивается на целевое изображение, пользователь будет перенаправлен на другую ссылку. Например, когда пользователь перетаскивает изображение с идентификатором «drag 1» на целевое изображение, он направляется на веб-страницу «портфолио-волокно» на моем веб-сайте. В качестве альтернативы, если пользователь перетаскивает изображение с идентификатором «drag 2» на целевое изображение, он направляется на веб-страницу «портфолио-краска»; и так далее. До сих пор мне удавалось заставить почти все работать, но когда я перетаскиваю любое из изображений, все они направляют меня на одну и ту же веб-страницу («портфолио-волокно»). Я новичок в программировании, поэтому был бы очень признателен за любой совет, который вы можете дать, о том, как заставить различные перетаскиваемые изображения направлять пользователя к разным ссылкам. Ниже приведен сценарий, который у меня есть на данный момент.

Answer 1

Вы были очень близки, ваша первая проблема заключалась в том, что вы назначали data в своем операторе if, используя только один = при назначении переменной, вывод всегда будет истинным, поэтому он всегда отправлялся в портфель- волокно. Во-вторых, при сравнении должно быть drag 1, а не #drag 1, вы можете увидеть это, поставив console.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();
  }
}