Почему не запускается событие ondrop html? - PullRequest
Новая
       8

Почему не запускается событие ondrop html?

0 голосов
/ 07 февраля 2019

Я пытаюсь создать систему предметов для своей игры, которая позволит игрокам перемещать предметы между слотами, перетаскивая их.В качестве теста я создал базовую систему с элементом, который можно перетаскивать, а затем, если его опустить на слот (черный квадрат), он должен появиться внутри него.Однако, кажется, что мое событие 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 и совершенно новый для перетаскивания и тому подобное.

Спасибо!

1 Ответ

0 голосов
/ 07 февраля 2019

Итак, из того, что я собрал из MDN, прослушиватели событий будут работать, когда вы помечаете элемент как перетаскиваемый, поэтому мы можем просто добавить прослушиватели событий для событий перетаскивания и отбрасывания, а затем он сработает.Кроме того, вы можете использовать условные выражения, чтобы определить, правильно ли была выбрана цель, а затем запустить функцию, основанную на этом.

MDN Link: 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">
...