Javascript 拖放会产生不希望的结果

我在我的程序中遇到了一个我似乎无法理解的错误。基本上，当我的游戏开始时，我有一个循环，循环遍历所有将被拖放的片段。但是，当我实际测试它时，周期性地（看起来bug取决于我首先尝试拖动哪个元素，然后影响后面的元素）我会去拖动一个项目，当我尝试拖放它时，不会发生拖放事件，但是如果我转到表的左上角元素，并从左向右拖动每个元素，最终，所有的碎片都可以拖放，但只能按照特定的顺序进行。我一直在努力解决这个问题，但已经没有办法了。这是一个问题的现场演示，当我选择第一个五角大楼时，它就开始了，这并不是每一个游戏都会发生

我使用的循环是这样的，它是我在程序启动时调用的对象的一部分：

enablePieces:    function() {
                         for(var i = 0; i < this.dragPieces.length; i++) {
                             this.dragPieces[i].ondragstart = this.dragStart;
                             this.targetPieces[i].ondragover = this.allowDrop;
                             this.targetPieces[i].ondrop = this.doDrop;
                      };

},

我还应该提到，当我从DOM中获取元素时，它是这样的：

Perfection.start = function() {
    newGame();
    *Perfection.view.enablePieces();*
    Perfection.controls.startButton.onclick = beginGame;
    Perfection.controls.newButton.onclick = newGame;
};

dragPieces    :   document.querySelectorAll(".piecetray td img"),
targetPieces  :   document.querySelectorAll(".gametray td img"),

当我在控制台中键入perfecture.view.dragPieces时，我得到：

Perfection.view.dragPieces
NodeList 
[ <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, 26 more… ]

我不认为两者之间有任何区别，但现在我在问自己，似乎在使用我创建的阵列时，发生的次数较少，但这可能只是因为缺少对其中一个的测试，而对另一个的测试较少，有人能告诉我为什么会发生这种情况吗

拖放功能也发布在此处：

dragStart   :   function(event) {
                    var piece = event.currentTarget;
                    piece.classList.add("selected"); 
                },
allowDrop   :   function(event) {
                    event.preventDefault();
                },
doDrop      :   function(event) {
                    var bestTime = 0;
                    event.preventDefault();
                    var currentPiece = document.querySelector(".selected");
                    var targetPiece = event.currentTarget;
                    var targetParent = targetPiece.parentElement;
                    if (getName(currentPiece) === getName(targetPiece)) { 
                        targetParent.appendChild(currentPiece);
                        currentPiece.classList.remove("selected");
                        currentPiece.classList.add("matched");
                        matchedCount++;
                    };
                    if ((matchedCount === 36) && (Perfection.timeLeft !== 0)) 
                        if(Perfection.timeLeft > bestTime) {
                            Perfection.view.updateScore("Best time " + timer.innerHTML);
                            bestTime = Perfection.timeLeft;
                            clearInterval(Perfection.timer);
                    };

---

问题在于：

currentPiece.classList.remove（“选定”）

---

因为它被放置在条件中，所以只有在匹配的情况下才会删除该类，但无论如何，在每次放置事件中都应该删除该类。

是否有此类的实时演示？这将有助于实际了解本例中的问题。@zozo这里是一个现场演示，当我试图放下第一个五角大楼时，请注意问题的开始。你可以看到，一旦我到了桌子的左上角，并按顺序移动，它就会工作。我希望有一个在线链接能够调试（代码没有明显的错误-至少我没有看到）：）。考虑到它是随机发生的，我想可能是一个事件失火了（这只是一个猜测）。你能在dragStart和doDrop上添加一些日志吗？通过这种方式，您可以将问题仅隔离到一个函数。还可以尝试打开控制台以防出现错误。不幸的是，无法在当前数据方面为您提供更多帮助。

dragStart   :   function(event) {
                    var piece = event.currentTarget;
                    piece.classList.add("selected"); 
                },
allowDrop   :   function(event) {
                    event.preventDefault();
                },
doDrop      :   function(event) {
                    var bestTime = 0;
                    event.preventDefault();
                    var currentPiece = document.querySelector(".selected");
                    var targetPiece = event.currentTarget;
                    var targetParent = targetPiece.parentElement;
                    if (getName(currentPiece) === getName(targetPiece)) { 
                        targetParent.appendChild(currentPiece);
                        currentPiece.classList.remove("selected");
                        currentPiece.classList.add("matched");
                        matchedCount++;
                    };
                    if ((matchedCount === 36) && (Perfection.timeLeft !== 0)) 
                        if(Perfection.timeLeft > bestTime) {
                            Perfection.view.updateScore("Best time " + timer.innerHTML);
                            bestTime = Perfection.timeLeft;
                            clearInterval(Perfection.timer);
                    };