javascript - Ondrop 功能。帮助我完成我的职责。

Question

我正在尝试为我的网站添加一个功能，其中有多个图片，并且您必须将图标(海龟)拖到一个框中。我设法找到了一些代码，说明如果拖动正确的图标会发生什么情况。

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));
    window.location.assign("homepage.html");
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="turtle.ico" draggable="true" ondragstart="drag(event)" 
width="100" height="100">
<img draggable="true" width="100" height="100" src="fish.ico">

我现在在编写代码时遇到了麻烦，如果拖动错误的图标 (fish.ico) 会发生什么情况。我计划让它有一个提示，说“再试一次”，但不知道该怎么做。有人可以帮助我创建函数来做到这一点吗？

Answer 1

如果每个图像都有正确的 id 设置，您可以检查放置事件中的数据是否为 ​​turtle。

见下文。

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");
  if (data !== "turtle") {
    alert("Try again!");
    return;
  }
  var img = document.getElementById(data);
  ev.target.appendChild(img);
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  drop here
</div>

<img id="turtle" src="turtle.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />
<img id="fish" src="fish.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />