Programación para web: Javascript API DOM 5

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.

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...