javascript - 为什么不触发 ondrop html 事件？

Question

我正在尝试为我的游戏制作一个元素系统，它允许玩家通过拖放来在插槽之间移动元素。作为我的测试，我制作了一个基本系统，其中包含一个可以拖动的项目，如果将其拖放到插槽(黑色方 block )上，它应该会出现在其中。但是，我的 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;

}

我希望控制台记录“掉线!”，但它没有。谁能帮我？请记住，我对 Javascript 比较陌生，对拖放等操作也是全新的。

谢谢!

Answer 1

因此，根据我从 MDN 收集到的信息，当您将元素标记为可拖动时，事件监听器将起作用，因此我们只需为 dragover 和 drop 事件添加事件监听器，然后它就会触发。此外，您可以使用条件判断是否正确选择了目标，然后基于此触发函数。

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