1

Tenho um problema com um Drag and Drop. tenho duas divs, uma onde possui imagens que serão jogadas para outra div que possui 1 imagem específica que não pode ser movida. Porém quando dou Drop em cima de uma imagem (tanto na específica quanto nas outras) a imagem some, é comida. Peço a ajuda de vocês para resolver este problema. Seguem os códigos>

<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>
<script type="text/javascript" src="js/main.js"></script>
<script>
        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");
            ev.target.appendChild(document.getElementById(data));
        }
        </script>
</body>

1 Resposta 1

3

O que acontece é que você está fazendo um .appendChild() na própria imagem ao soltar uma imagem sobre a outra, fazendo com que apenas a primeira seja exibida, já que a tag img não permite conteúdo interno, ao contrário de div's etc.

O que você pode fazer é verificar se o alvo do evento ondrop é uma imagem ou não. Se for uma imagem, você faz o .appendChild() na div-pai. Basta pegar o .tagName e verificar se é igual a IMG; se for, adicione antes do .appendChild() um .parentNode, que é a div-pai.

É só colocar um if na função drop():

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));
   }
}
1
  • MEU AMIGO MUITO OBRIGADO VOCE ACABA DE SALVAR O MEU EMPREGO!! 25/11/2018 às 23:28

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 .