Question

我正在尝试为我的游戏制作道具系统，这将允许玩家通过拖放来在插槽之间移动道具。作为测试，我制作了一个基本系统，其中的一个项目可以拖动，如果掉落在插槽（黑色正方形）上，则应该出现在其中。但是，看来我的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;

}

我希望控制台记录“已删除！”，但事实并非如此。谁能帮我？请记住，我是Java的新手，而拖放等的新手。

谢谢！

Answer 1

因此，从我从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">

为什么ondrop html事件不触发？

1 个答案: