Question

对于编码来说还很陌生，我正在开发一个四连环游戏。我粘贴的代码使我可以将红色和黄色标记拖放到游戏板第一行的单元格中。这行得通，但是在我继续下一步之前，我想知道是否可以使用一种不太“冗长”的方式来解决这个问题？更专业的方法？

var dragYellow = document.getElementById("yellowToken1");
var dragRed = document.getElementById("redToken1");   
var dropLoc10 = document.getElementById("10");   
var dropLoc11 = document.getElementById("11");
var dropLoc12 = document.getElementById("12");
var dropLoc13 = document.getElementById("13");
var dropLoc14 = document.getElementById("14");
var dropLoc15 = document.getElementById("15");
var dropLoc16 = document.getElementById("16");

dragYellow.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "yellowToken1");
}

dragRed.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "redToken1");
}

dropLoc10.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc11.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc12.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc13.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc14.ondragover = function(evt) {    
    evt.preventDefault();                       
} 

dropLoc15.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc16.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc10.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc10.appendChild(myNewElement);                    

}

dropLoc11.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc11.appendChild(myNewElement);                    

}

dropLoc12.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc12.appendChild(myNewElement);                    

}

dropLoc13.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc13.appendChild(myNewElement);                    

}

dropLoc14.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc14.appendChild(myNewElement);                    

}

dropLoc15.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc15.appendChild(myNewElement);                    

}

dropLoc16.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc16.appendChild(myNewElement);                    

}

Answer 1

类似的东西：

    var dragYellow = document.getElementById("yellowToken1");
    var dragRed = document.getElementById("redToken1");  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());
        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault();                       
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData("key");  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement("img");   
            myNewElement.src = myElement.src;                   
            dropLoc[i].appendChild(myNewElement);                    

        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "yellowToken1");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "redToken1");
    }

您知道术语“干燥”（不要重复自己）吗？如果您发现自己写的名字带有数字后缀，那么使用数组代替是一个巨大的提示！

Answer 2

我建议您在要拖动的对象和放置位置上添加一个class。例如：您的drop元素可以有一个类（比方说drop-location），您只需-

var dropLocs = document.querySelector(".drop-location");

dropLocs.ondragover = function(evt) {    
    evt.preventDefault();                 
}

dropLocs.ondrop = function(evt) {                  
    // Drop logic here
}

由于它是一个类选择器，因此您必须找出目标对象（evt.target）并仅将新创建的img元素附加到该对象。

Answer 3

对于感兴趣的任何人，请参阅Sharper的代码，但我不得不更改一行

var dragYellow = document.getElementById('yellowToken1');
    var dragRed = document.getElementById('redToken1');  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());

        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault(); 
            console.log('dragging over');                      
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData('key');  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement('img');   
            myNewElement.src = myElement.src;                   
            evt.currentTarget.appendChild(myNewElement);                    
        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData('key', 'yellowToken1');
        console.log("dragging");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData('key', 'redToken1');
        console.log('dragging');
    }

如何使此Javascript代码更简洁？

3 个答案: