Tenho duas divs, uma (div2) que contém 4 imagens que serão arrastadas para outra div(div1) que possui uma imagem fixa. Minha necessidade é de jogar os valores do ID de cada imagem dentro de um array chamado Resposta em ordem de drop, ou seja: Se a imagem de ID 7 fora colocada na div primeiro, este será o primeiro numero do array e assim por diante. Já faz umas 3 horas que estou agarrado e preciso de ajuda. Segue o código>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="bloco0.png">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<image id="5" class = "bloco" src="bloco1.png" draggable="true" ondragstart="drag(event)">
<image id="6" class = "bloco" src="bloco2.png" draggable="true" ondragstart="drag(event)">
<image id="7" class = "bloco" src="bloco3.png" draggable="true" ondragstart="drag(event)">
<image id="8" class = "bloco" src="bloco4.png" draggable="true" ondragstart="drag(event)">
</div><br>
<button onclick="check()"> verificar </button>
<script type="text/javascript" src="js/main.js"></script>
<script>
var resposta = [];
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if(ev.target.tagName == "IMG"){
ev.target.parentNode.appendChild(document.getElementById(data));
}else{
ev.target.appendChild(document.getElementById(data));
}
}
var el1 = document.getElementById('5');//\\
var el2 = document.getElementById('6');//\\
var el3 = document.getElementById('7');//\\
var el4 = document.getElementById('8');//\\
function check(){
if(el1.parentElement.id == "div1" && el2.parentElement.id == "div2" && el3.parentElement.id == "div2" && el4.parentElement.id == "div2"){
resposta.push("5");
console.log(resposta);
}
if(el2.parentElement.id == "div1" && el3.parentElement.id == "div2" && el4.parentElement.id == "div2"){
resposta.push("4");
if(el1.parentElement.id=="div1" && resposta[0]!="5"){
resposta.push("5");
}
console.log(resposta);
}
}
</script>
a função "check()" é uma tentativa que fiz e não deu certo. Desde já agradeço.