拖放产生不良结果答案

【问题标题】：Drag and Drop producing undesirable results拖放产生不良结果
【发布时间】：2015-03-19 03:45:51
【问题描述】：

我的程序中出现了一个我似乎无法弄清楚的错误。基本上，当我的游戏开始时，我有一个循环遍历所有将被拖放的部分。但是，当我实际测试它时，定期（并且似乎错误取决于我首先尝试拖动哪个元素，然后影响之后的元素）我会去拖动一个项目，当我尝试放下它时，如果我转到表格的左上角元素并从左到右拖动每个元素，则不会发生 drop 事件，最终所有部分都可以拖放，但只能以特定顺序进行。我一直在努力解决这个问题，但已经没有想法了。这是这个问题的现场演示，它从我选择第一个五边形开始，并不是每场比赛都会发生这种情况...https://www.youtube.com/watch?v=-izy_tuxmdg

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

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;
                      };

},

当我调用该方法时，它是这样的：

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

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

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

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

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

但是，如果我创建一个数组var dragArray = [ ];，然后将“NodeList”中的所有元素推入该数组，然后将该数组输入控制台，我会得到：

dragArray
Array [ <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);
                    };

【问题讨论】：

有任何现场演示吗？在这种情况下将有助于实际看到问题。
@zozo 这里是一个现场演示，当我尝试放下第一个五边形时，请注意问题的开始。您可以看到，一旦我到达桌子的左上角并按顺序移动它就可以了。 youtube.com/watch?v=-izy_tuxmdg
我希望一个在线链接能够调试（代码没有明显的错误 - 至少我没有看到）:)。鉴于它是随机发生的，我认为可能是一个事件未触发（这只是一个猜测）。您能否在 dragStart 和 doDrop 上添加一些日志？这样你就可以将问题隔离到一个函数上。也尝试保持控制台打开错误。很遗憾，目前的数据无法为您提供更多帮助。

标签： javascript arrays dom drag-and-drop

【解决方案1】：

问题在于：

currentPiece.classList.remove("selected");

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

【讨论】：