Respuesta a: Dudas de JavaScript

#22496

Renato Visintini
Participante

A continuación  mi código dragdrop.js del ejercicio: Curso HTML5 video 43.-

No consigo que la “funtcion entrando” me ejecute el “else”, de manera que al ingresar (“dragenter”) cambie al color rojo. Parece que la condición de “if (id!== “imagen 2”) no distinque true or false, no identifica la imágen.-

La imagen 2 no tiene permitido el ingreso pues la “function soltado” trabaja perfectamente cambiando al color rojo y evitando la fijación de la imágen. –

Pero cómo dije, al ingresar al destino toma el amarillo como las tres imágenes que tienen permitida la fijación.-

He hecho varias búsquedas e intentos pero todos infructuosos. Agradeceré una guía para encontrar la solución.

 

    <span style="color: #808080;">//Javascript document
</span><span style="color: #808080;">
</span><span style="color: #cc7832;">var </span>elem_destino;
<span style="color: #cc7832;">var </span>id;
<span style="color: #cc7832;">var </span>elemento;
<span style="color: #cc7832;">var </span>i;

    <span style="color: #cc7832;">function </span>comenzar(){

      <span style="color: #cc7832;">var </span>x = document.getElementById(<span style="color: #6a8759;">"cajaimagen"</span>).querySelectorAll(<span style="color: #6a8759;">"img"</span>);

      <span style="color: #cc7832;">for </span>(i = <span style="color: #6897bb;">0</span>; i < x.length; i++) {
                      x[i].addEventListener(<span style="color: #6a8759;">"dragstart"</span>, comenzando_arrastrar, <span style="color: #cc7832;">false</span>);

                      <span style="color: #cc7832;">if</span>(i!=<span style="color: #6897bb;">1</span>){
                      x[i].addEventListener(<span style="color: #6a8759;">"dragend"</span>, terminado, <span style="color: #cc7832;">false</span>);
                      }
         }

          elem_destino=document.getElementById(<span style="color: #6a8759;">"zonadestino"</span>);

          elem_destino.addEventListener(<span style="color: #6a8759;">"dragenter"</span>, entrando, <span style="color: #cc7832;">false</span>);

          elem_destino.addEventListener(<span style="color: #6a8759;">"dragover"</span>, <span style="color: #cc7832;">function</span>(e){
                  e.preventDefault();}, <span style="color: #cc7832;">false</span>);

          elem_destino.addEventListener(<span style="color: #6a8759;">"drop"</span>, soltado, <span style="color: #cc7832;">false</span>);

          elem_destino.addEventListener(<span style="color: #6a8759;">"dragleave"</span>, saliendo, <span style="color: #cc7832;">false</span>);
    }

    <span style="color: #cc7832;">function </span>comenzando_arrastrar(e){
              elemento=e.target;
              e.dataTransfer.setData(<span style="color: #6a8759;">"Text"</span>, elemento.getAttribute(<span style="color: #6a8759;">"id"</span>));
    }

    <span style="color: #cc7832;">function </span>soltado(e){
             e.preventDefault();
             id= e.dataTransfer.getData(<span style="color: #6a8759;">"Text"</span>);

             <span style="color: #cc7832;">if</span>(id!== <span style="color: #6a8759;">"imagen 2"</span>){
                  <span style="color: #cc7832;">var </span>src= document.getElementById(id).src;
                  elem_destino.innerHTML=<span style="color: #6a8759;">"+ src + <span style="color: #6a8759;">"'>"</span>;

             } <span style="color: #cc7832;">else </span>{
                   elem_destino.innerHTML=<span style="color: #6a8759;">"La imágen no es admitida"</span>;
                   elem_destino.style.background=<span style="color: #6a8759;">"red"</span>;
             }
    }

    <span style="color: #cc7832;">function </span>entrando(e){
              e.preventDefault();
              e.dataTransfer.setData(<span style="color: #6a8759;">"Text"</span>, elemento.getAttribute(<span style="color: #6a8759;">"id"</span>));
            <span style="color: #cc7832;">var </span>id= e.dataTransfer.getData(<span style="color: #6a8759;">"Text"</span>);

             <span style="color: #cc7832;">if</span>(id!== <span style="color: #6a8759;">"imagen 2"</span>){
                   elem_destino.style.background=<span style="color: #6a8759;">"yellow"</span>;
              }<span style="color: #cc7832;">else</span>{
                   elem_destino.style.background=<span style="color: #6a8759;">"red"</span>;
                   }
    }

    <span style="color: #cc7832;">function </span>saliendo(e){
              e.preventDefault();
              elem_destino.style.background=<span style="color: #6a8759;">"white"</span>;
    }

    <span style="color: #cc7832;">function </span>terminado(e){
              elemento=e.target;
              elemento.style.visibility=<span style="color: #6a8759;">"hidden"</span>;
    }

window.addEventListener(<span style="color: #6a8759;">"load"</span>, comenzar, <span style="color: #cc7832;">false</span>);