0

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.

1
  • Tente adicionar seu código fonte completo para que possamos te ajudar! 26/11/2018 às 11:40

1 Resposta 1

0

Basta colocar no final da função drop() um .push() da id da imagem dropada:

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

   resposta.push(data); // adiciona na array a id da imagem
}

Pelo que pude perceber você estava tentando fazer isso na função check(), só que de uma forma bem mais complicada.

Veja:

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));
   }
   
   resposta.push(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);
//        }

             console.log(resposta);
    }
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
   <img width="50" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
   <image width="50" id="5" class = "bloco" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" draggable="true" ondragstart="drag(event)">
   <image width="50" id="6" class = "bloco" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" draggable="true" ondragstart="drag(event)">
   <image width="50" id="7" class = "bloco" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" draggable="true" ondragstart="drag(event)">
   <image width="50" id="8" class = "bloco" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" draggable="true" ondragstart="drag(event)">
</div><br>
<button onclick="check()"> verificar </button>

1
  • novamente você salvando meu emprego. você é incrível 26/11/2018 às 12:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .