javascript - 为什么不触发 ondrop html 事件?
问题描述
我正在尝试为我的游戏制作一个物品系统,这将允许玩家通过拖放来在插槽之间移动物品。作为我的测试,我制作了一个基本系统,其中包含一个可以拖动的项目,然后如果将其放在插槽(黑色方块)上,则应该出现在其中。但是,看来我的 ondrop 事件没有触发。
我尝试注释掉我的正常代码并只输入一个console.log(),但它没有记录任何让我相信事件没有触发的东西。
HTML:
<div class="slot" ondrop="drop(event)" ondragover="drag(event)">
<img src="">
</div>
<img class="item" style="width: 50px; height: 50px;" draggable="true" ondragstart="drag(event)" src="flint.png">
JS:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img", ev.target.src);
}
function drop(ev) {
ev.preventDefault();
console.log('dropped!');
// (code to change image)
// var data = ev.dataTransfer.getData("img");
// ev.target.children[0].src = data;
}
我预计控制台会记录“dropped!”,但事实并非如此。谁能帮我?请记住,我对 Javascript 相对较新,并且对拖放等完全陌生。
谢谢你!
解决方案
因此,根据我从 MDN 收集的信息,当您将元素标记为可拖动时,事件侦听器将起作用,因此我们只需为拖放事件添加事件侦听器,然后它就会触发。此外,您可以使用条件来确定正确选择了目标,然后根据该条件触发函数。
MDN 链接:https ://developer.mozilla.org/en-US/docs/Web/Events/drop
他们给出了一个非常好的例子,可以完全满足您的要求。我会将示例放在代码片段中并使用它。我相信你很快就会明白的。
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
}, false);
function drag(ev) {
ev.dataTransfer.setData("img", ev.target.src);
}
document.addEventListener("drop", function( event ) {
console.log("dropped")
})
.slot{
width:50px;
height:50px;
background:black;
}
<div class="slot">
<img src="">
</div>
<img class="item" style="width: 50px; height: 50px;" draggable="true" ondragstart="drag(event)" src="flint.png">
推荐阅读
- android - 读取目录时文件不出现
- python - 使用请求关闭发送到 url 的文件 - Python
- javascript - jQuery .css() 不适用于迭代元素
- amazon-web-services - Step Functions 上的 EMR 托管自动缩放
- reactjs - Reactjs如何使用useEffect处理useState的很多变化
- c++ - QStrings isNull out of QSettings 是错误的
- node.js - 将 npm 命令的输入写入变量,但仅写入特定部分
- javascript - React:将参数发送到父组件
- javascript - 如何仅更改“inner.html”的一部分?
- python - python中的异步日志记录