我正在尝试为我的网站添加一个功能,其中有多个图片,并且您必须将图标(海龟)拖到一个框中。我设法找到了一些代码,说明如果拖动正确的图标会发生什么情况。
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) 会发生什么情况。我计划让它有一个提示,说“再试一次”,但不知道该怎么做。有人可以帮助我创建函数来做到这一点吗?
最佳答案
如果每个图像都有正确的 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" />
关于javascript - Ondrop 功能。帮助我完成我的职责。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45070537/