Laboratorio: Comparar productos mediante drag & drop
El otro dÃa contábamos como realizar drag&drop de elementos HTML y en el ejemplo lo que hacÃamos era recolocar los elementos dentro del HTML. Indicábamos que una buena utilidad para este efecto podrÃa ser para realizar comparativas de productos en una tienda.
Si has entendido la entrada enterior sobre D&D, no tendrás dificultad en comprender qué es lo que varÃa en este ejemplo para poder comparar los productos.
La parte visual puede realizarse como se quiera, pero nosotros usamos una capa contenedora para cada producto, que funcionará como miniaturas.
<div id="0" class="miniatura"><img src="1.png" alt="1" /><br />Precio: 100€</div>
<div id="1" class="miniatura"><img src="2.png" alt="2" /><br />Precio: 200€</div>
<div id="2" class="miniatura"><img src="3.png" alt="3" /><br />Precio: 300€</div>
<br style="clear: both"/>
<div id="comparativa">Selecciona uno de los viajes y compáralo con otro para conocer cual es el más barato.</div>Las capas que contienen las miniaturas son las únicas que vamos a usar, para ello cuando capturamos el elemento HTML que recibe el evento del ratón, iremos navegando por los nodos padre hasta obtener la capa contenedora de la miniatura.
Cuando finaliza el drag&drop, comprobamos el valor de cada viaje y mostraremos el más barato en la capa comparativa, para ello usamos un array con los precios que los Ãndices serán los ids de las capas miniaturas.
var nuevo = null; // El objeto efecto drag&drop
var obj = null; // El objeto seleccionado
var okDrag = false; // Si se hace drag&drop
var precios = new Array(100, 200, 300);
// Trata el drag&drop
function drag(evt, estado) {
switch (estado) {
// Inicio o fin de drag&drop
case 0:
// Fin drag
if (okDrag) {
// Obtenemos el elemento destino del evento del ratón
var destino = evt.srcElement? evt.srcElement : evt.target;
// Si no se trata del BODY o del HTML, para evitar problemas...
if (destino.tagName != "BODY" && destino.tagName != "HTML") {
// Obtenemos el elemento miniatura
while (destino.tagName != "DIV" && destino.tagName != "BODY") {
destino = destino.parentNode;
}
// Si no es miniatura paramos
if (destino.className != "miniatura") return;
// Eliminamos el elemento que hemos creado para el efecto d&d
nuevo.parentNode.removeChild(nuevo);
// Obtenemos donde se va a realizar la comparativa
var comparativa = document.getElementById("comparativa");
var aux = null;
if (precios[obj.id] < precios[destino.id]) {
aux = obj.cloneNode(true);
} else {
aux = destino.cloneNode(true);
}
comparativa.innerHTML = "";
// Borramos el class para que no se pueda acabar el D&D en la comparativa
aux.className = "none";
comparativa.appendChild(aux);
nuevo = null;
okDrag = false;
}
// Inicio drag
} else {
// Obtenemos el elemento destino del evento del ratón
obj = evt.srcElement? evt.srcElement : evt.target;
// Si no se trata del BODY o del HTML, para evitar problemas...
if (obj.tagName != "BODY" && obj.tagName != "HTML") {
// Obtenemos el elemento miniatura
while (obj.tagName != "DIV") {
obj = obj.parentNode;
}
// Salimos si no es una capa de las que nosotros queremos
if (obj.className != "miniatura") return;
// Creamos un contenedor para el elementro efecto D&D
nuevo = document.createElement("DIV");
nuevo.id = "nuevo";
nuevo.className = "nuevo";
// Añadimos el clon
nuevo.appendChild(obj.cloneNode(true));
// Posicionamos
nuevo.style.top = (evt.clientY+5)+"px";
nuevo.style.left = (evt.clientX+5)+"px";
// Lo incluimos en el BODY
document.body.appendChild(nuevo);
okDrag = true;
}
}
break;
case 1: // Movimiento drag
if (okDrag) {
// Posicionamos
nuevo.style.top = (evt.clientY+5)+"px";
nuevo.style.left = (evt.clientX+5)+"px";
}
break;
}
}
