Programación para web con Javascript,API DOM 5: event.preventDefault(), event.target, event.dataTransfer.setData(), setInterval(), setTimeout(), clearInterval()

COMBINACIÓN DE EVENTOS DRAG -dragtarget,

drag / drop

Cuando las áreas de destino activan un evento cuando los eventos drag se activan:

En HTML

<!-- Contenedor -->
<div class="areaInicio">

<!-- Objeto movible con evento 'draggable' -->
<p draggable="true" id="objetoMovible">XXXXX</p>
</div>

<p>INICIA TODO</p>

<div class="areaInicio"></div>

<!-- Texto pendiente que se altera luego -->
<p id="pendiente"></p>

En Javascript

/* = = = = =  RECORDAR = = = = = 
event.target siempre obtiene los datos 
del elemento a arrastrar */

/* Eventos activan  */
document.addEventListener("dragstart", function( ) {

/* El método dataTransfer.setData() establece el tipo de datos 
y el valor de los datos arrastrados */
event.dataTransfer.setData("Text", event.target.id);

/* Salida de texto al comenzar a arrastrar el elemento 'p' */
document.getElementById("pendiente").
innerHTML = "Inicia arrastre...";

/* Cambiar la opacidad del elemento arrastrable */
event.target.style.opacity = "0.8";
});

/* Mientras arrastra el elemento 'p', 
cambie el color del texto de salida */
document.addEventListener("drag", function( ) {
document.getElementById("pendiente").style.color = "red";
});

/* Genere algo de texto cuando termine de arrastrar 
el elemento p y restablezca la opacidad  */
document.addEventListener("dragend", function( ) {
document.getElementById("pendiente").
innerHTML = "Finaliza arrastre...";
/* Toma el elemento arrastable */
event.target.style.opacity = "1";
/* Obtiene el elemento con el ID 'pendiente' y 
accede al estilo de 'ancho' */
document.getElementById("pendiente").
style.width = "100px";

document.getElementById("pendiente").
style.heigth = "100px";

document.getElementById("pendiente").
style.backgroundColor = "red";

document.getElementById("pendiente").
style.color = "white";
});

/* Eventos disparados contra el objetivo de caída */
/* Cuando el elemento p arrastrable entre en el areaInicio, 
cambie el estilo de borde del DIVS */
document.addEventListener("dragenter", function( ) {
if ( event.target.className == "areaInicio" ) {
event.target.style.border = "3px solid red";
}
});

/* De forma predeterminada, los datos/elementos no se 
pueden quitar en otros elementos. Para permitir una 
caída, debemos evitar el manejo predeterminado del 
elemento */
document.addEventListener("dragover", function( ) {
event.preventDefault();
});

/* Cuando el elemento p arrastrable abandone el 
areaInicio, restablezca el estilo de borde del DIVS */
document.addEventListener("dragleave", function( ) {
if ( event.target.className == "areaInicio" ) {
event.target.style.border = "";
}
});

/* On drop - Evitar el manejo predeterminado del 
navegador de los datos (el valor predeterminado está 
abierto como enlace en drop). Restablecer el color del 
texto de salida y el color del borde del DIV. Obtenga los 
datos arrastrados con el método dataTransfer.getData() 
Los datos arrastrados son el identificador del elemento 
arrastrado ("drag1"). Anexar el elemento arrastrado 
al elemento de colocación */
document.addEventListener("drop", function( ) {
event.preventDefault();

if ( event.target.className == "areaInicio" ) {

document.getElementById("pendiente").style.color = "";

/* Estilo cuando se finalice drop */
event.target.style.border = "";

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));
}
});

En CSS

/* Los dos recuadros tienen este estilo*/
.areaInicio {
width: 100px; 
height: 120px;
padding: 5px;
border: 1px solid black;
}

#objetoMovible{
width: 90px;
height: 90px;
background-color: pink;
}

ANIMANDO ELEMENTOS

drag / drop

Para activar animaciones cuando se ejecuta una acción de click. En el ejemplo inferior se tiene un botón y un recuadro rojo. Al activar el botón se ejecuta la función 'moverCuadro(){}' que a su vez aloja una función 'setInterval( .. )' y que a su vez aloja una función de intervalo. Esta función 'setInterval()' obliga a ejecutar código cuando un lapso de tiempo ha ocurrido.

Explico aquí tres funciones útiles cuando deseamos controlar intervalos de tiempo: setInterval(), setTimeout() y clearInterval():

Función setInterval()

Itera un código dado dentro de la función, y define el rango de milisegundos que ese código será iterado.

En Consola

setInterval(() => console.log('holi Dudú'), 1000);

/* La palabra 'holi' será mostrada cada 5 segundos en consola */
// == OJO > Un salto a la línea de => hará que no funcione

Función setTimeout()

Ejecuta un código interno cuando ya ha transcurrido un lapso de milisegundos dados.

En Consola

setTimeout(() => {
  console.log("Ya pasaron tres segundos");
}, 3000);

/* Se mostrará en consola 'Ya pasaron tres segundos' 
luego de tres segundos */

Función clearInterval()

Es usado en complemento a setInterval(). Cuando la función clearInterval() es activada dentro de setInterval() detiene la iteración de un código dado.

En Javascript

/* Conteo mostrará mensaje luego de 3 segundos */
var conteoOk = setInterval(() => 
console.log('holi Dudú'), 
3000);

// Detener y mostrar luego de 6 segundos
setTimeout(() => { clearInterval(conteoOk);
  console.log('Han pasado 3 segundos');
}, 6000);

• EN RESUMEN
• setInterval()..ejecuta código según un lapso
• setTimeout()..espera un lapso y ejecuta
• clearInterval()..cancela código luego de un lapso dado en alguna de la funciones anteriores.

Otra combinación:

En Javascript

// Valor
var num = 1;

// Método que suma
function sumarOki()
{console.log (2 + num);
num++;
// Incrementa
}

/* Aloja un rango de intervalo, 
y lo mostrará cada segundo */
var iterarOki = setInterval(sumarOki, 1000);

// === USANDO CLEAR-INTERVAL()
setTimeout(function() {
// Cancela intervalo
  clearInterval(iterarOki);
  console.log('Ya pasaron 5 segundos');
}, 5000);

Por otro lado, presentamos un ejercicio que combina las tres funciones es el siguiente:

En HTML

<!-- Se crea elemento boton --->
<button onclick="moverCuadro()"> Ir a la derecha </button>
<!-- Se crea elemento cuadro --->
<div id="cuadro"></div>
<p id="elemento"></p>

En Javascript

function moverCuadro(){
// Nueva variable 'b' aloja el elemento con ID 'cuadro'*/
let b = document.getElementById("cuadro");
/* variable vector 'x' dirige hacia adelante */
let x = 0;
/* variable vector 'm' dirige hacia abajo */
let m = 10;

setInterval(function() {
// Condicional. Si 'x' pasa de cero a 200...
if (x === 200){
      // Limpiar duración de intervalo
      clearInterval();
      /* Pero si 'x' no pasa de 200. Es decir, 
      mientras el valor de 'x' sea menor a 200 */
      } else {
      // Incrementa el valor actual de 'x' en una unidad 
      x++; 
      /* OJO AQUÍ: Se apunta a la variable 'b', 
      se ingresa a las reglas de CSS, 
      se añade propiedad 'left' 
      Y SE ADJUNTA (NO SE SUMA)... */
      b.style.left = x + "px";
      /* Altera posición desde arriba, 
      incrementa dirección */
      b.style.top = m++ + "px";
      }
      /* El intervalo debe durar 1 MILISEGUNDO.
      Es decir, el cuadro se moverá cada milisegundo. 
      Si agregamos el valor de 1000 (un segundo, 
      entonces el cuadro se moverá cada segundo) */
      }, 1);
} 

En CSS

/* Todo 'div' tiene estas reglas */
div{
background-color: red;
width: 100px;
height: 100px;
/* Para que el elemento se coloque 
en la esquina superior izquierda, 
y permita reglas de posicionamiento top, left, etc... */
position: absolute;
}

En otras palabras, la estructura que se siguó para anidar las funciones fue:

En Javascript

function moverCuadro(){

// variables
/* document.getElementById... para apuntar 
al elemento div que deseamos alterar */

      setInterval(function() {
      // condicional: siempre que el valor de 'x' 
      // NO SEA IGUAL a la una distancia en pixeles dada 
      if(/*condicion*/){
      clearInterval();
      } else {
      // Incrementar 'x' y añadir un valor nuevo
      // Apuntar a valores y agregarles pixel
      }
      }
}

REGISTRAR ACTIVIDAD DE LOS ELEMENTOS AL SER CLICKEADOS

pendiente...