Question

我正在用JavaScript创建一个简单的图片益智游戏，并且我正在尝试实现HTML5拖放API。如果我将ondragstart，ondragover或ondrop事件添加到元素（即作为属性），它就可以工作。

但是，因为在同一类别中有很多不同的元素我需要添加事件监听器（只有当我尝试用更多的部分制作拼图时才会增加），我正在使用addEventListener来添加事件。但是，如果我这样做，它就不起作用。我已经在Chrome和Firefox中测试过了。为了记录，我真的想看看我是否可以使用HTML5拖放API而不是使用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>

First Stack Overflow问题，希望我没有做任何太愚蠢的事情;）

Answer 1

我知道已经有几年了，但我现在也在与 draggable 合作，这篇文章中关于将它与 addEventListener 一起使用的信息很少，所以也许它可以帮助某人。

请注意，拖动事件在 addEventListener API 和 HTML attribute 中具有不同的名称（其他 events 也是如此）。在你的情况下：

piecesOnPage[i].addEventListener("dragStart", dragPiece, false);

应该

piecesOnPage[i].addEventListener("dragstart", dragPiece, false);

dragOver 也一样；应该是 dragover

文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/dragstart_event

Answer 2

为img元素添加一些高度和宽度。

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

这解决了问题

JavaScript addEventListener不能与onDrop，onDragOver或onDragStart一起使用

2 个答案: