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），我现在无法编写代码。我打算给它一个提示，说＆＃34;再试一次＆＃34;但无法找到如何做到这一点。有人可以帮助我创建这样做的功能吗？

Answer 1

如果您对每张图片进行了适当的id设置，则可以检查放置事件中的数据是否为turtle。

见下文。

＆＃13;

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

＆＃13;

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

＆＃13;

Ondrop功能。帮助我完成我的职能。

1 个答案: