Viendo 13 entradas - de la 1 a la 13 (de un total de 13)
-
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>);
Viendo 13 entradas - de la 1 a la 13 (de un total de 13)
- Debes estar registrado para responder a este debate.