JavaScript addEventListener не работает с onDrop, onDragOver или onDragStart

Я создаю простую игру-головоломку для картинок в JavaScript и пытаюсь реализовать API перетаскивания HTML5. Если я добавляю событие ondragstart, ondragover или ondrop к элементу (то есть как атрибут), он работает.JavaScript addEventListener не работает с onDrop, onDragOver или onDragStart

Однако, поскольку в той же категории есть довольно много разных элементов, мне нужно добавить слушателей событий (которые будут только увеличиваться, если я попытаюсь сделать головоломку с большим количеством штук), я использую addEventListener для добавления Мероприятия. Однако, если я это сделаю, это не сработает. Я тестировал Chrome и Firefox. Для записи мне бы очень хотелось узнать, смогу ли я работать с API перетаскивания HTML5, а не с jQuery.

Вот соответствующий JavaScript:

var piecesOnPage = document.querySelectorAll("#pieces img"); 
var puzzleSlots = document.getElementsByTagName("td"); 

function enableDrop(ev) { 
    ev.preventDefault(); 
} 

function dragPiece(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function dropPiece(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
} 

function createEventListeners() { 
    if (piecesOnPage[0].addEventListener) { 
     for (i = 0; i < piecesOnPage.length; i++) { 
     piecesOnPage[i].addEventListener("dragStart", dragPiece, false); 
     } 
    } else if (piecesOnPage[0].attachEvent) { 
     for (i = 0; i < piecesOnPage.length; i++) { 
     piecesOnPage[i].attachEvent("onDragStart", dragPiece); 
     } 
    } 

    if (puzzleSlots[0].addEventListener) { 
     for (i = 0; i < puzzleSlots.length; i++) { 
     puzzleSlots[i].addEventListener("drop", dropPiece, false); 
    } 
    } else if (puzzleSlots[0].attachEvent) { 
     for (i = 0; i < puzzleSlots.length; i++) { 
     puzzleSlots[i].attachEvent("onDrop", dropPiece); 
     } 
    } 

    if (puzzleSlots[0].addEventListener) { 
     for (i = 0; i < puzzleSlots.length; i++) { 
     puzzleSlots[i].addEventListener("dragOver", enableDrop, false); 
     } 
    } else if (puzzleSlots[0].attachEvent) { 
     for (i = 0; i < puzzleSlots.length; i++) { 
     puzzleSlots[i].attachEvent("onDragOver", enableDrop); 
     } 
    } 
} 

if (window.addEventListener) { 
    window.addEventListener("load", createEventListeners, false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload", createEventListeners); 
}

Вот сопровождающий HTML. Обратите внимание, что для того, чтобы продемонстрировать, что нормальные события работают, но addEventListener этого не делает, я добавил нормальное событие к первой части головоломки и первому слоту головоломки. Те работают нормально, а остальные нет.

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="utf-8"> 
<head> 
<title>Puzzles</title> 
<style> 
    table { 
    border:1px #000000 solid; 
    border-collapse:collapse; 
    float:right; 
    margin:10px; 
} 

td { 
    padding:0; 
    line-height:0; 
    height:96px; 
    width:157px; 
} 
</style> 
</head> 

<body> 
    <table class="puzzleboard"> 
     <thead></thead> 
     <tbody> 
      <tr><td id="space1" ondrop="dropPiece(event)" ondragover="enableDrop(event)"></td><td id="space2"></td><td id="space3"></td></tr> 
      <tr><td id="space4"></td><td id="space5"></td><td id="space6"></td></tr> 
      <tr><td id="space7"></td><td id="space8"></td><td id="space9"></td></tr> 
     </tbody> 
    </table> 
    <div id="pieces"> 
     <img id="img1" draggable="true" ondragstart="dragPiece(event)" src="2-2.jpeg"><img id="img2" draggable="true" src="1-2.jpeg"><img id="img3" draggable="true" src="2-1.jpeg"><br> 
     <img id="img4" draggable="true" src="0-2.jpeg"><img id="img5" draggable="true" src="1-0.jpeg"><img id="img6" draggable="true" src="0-1.jpeg"><br> 
     <img id="img7" draggable="true" src="1-1.jpeg"><img id="img8" draggable="true" src="2-0.jpeg"><img id="img9" draggable="true" src="0-0.jpeg"><br> 
    </div> 
<script src="final-so.js"></script> 
</body> 
</html>

Первый Stack Overflow вопрос когда-либо, надеюсь, что я ничего слишком глупы не делать;)

источник

2017-02-21 TJD

«Для записи, я бы очень хотел, чтобы увидеть, если я могу получить эту работу с Drag HTML5 и падение API, а не с JQuery.» Вы понимаете, что вам не нужен jquery для этого .... – Phix

Я знаю, это на самом деле отчасти. Просто, когда появляется перетаскивание, кажется, что упоминается jQuery, и я бы предпочел просто использовать HTML и простой JavaScript. Извините, что я этого не делал! '^^ – TJD

Добавить некоторую высоту и ширину элемента IMG.

<img id="img1" draggable="true" ondragstart="dragPiece(event)" src="2-2.jpeg" height="100" width="100">

это решается вопрос

источник

2017-02-21 06:36:46

Спасибо, я очень ценю быстрый ответ, но, думаю, вы, возможно, пропустили это. Изображение с «ondragstart =» dragPiece (event) «УЖЕ работает, и я просто включил его в качестве демонстрации. Моя цель - сделать изображения работающими с помощью addEventListener БЕЗ« встроенных »событий. Используя этот метод, он все еще не работает Извините, если я запутался. – TJD

JavaScript addEventListener не работает с onDrop, onDragOver или onDragStart

ответ

Смежные вопросы