« anterior | siguiente »

Home > 2006 > Junio > Miércoles, 21 de Junio 2006 > Laboratorio: Comparar productos mediante drag & drop
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mié21Jun2006

Laboratorio: Comparar productos mediante drag & drop

15:33 H (CET)| Temas: How to · Javascript · Laboratorio

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. comparar-drag.png

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;
    }
}

Código

Demo

Relacionados

1. carlos rodriguez ~ Lunes, 29 Ene 2007 | 17:36H:

su demo no funciona ni en firefox ni en iexplorer

2. Luis ~ Lunes, 29 Ene 2007 | 20:46H:

Hola Carlos.

A mí si me funciona, creo que lo que pasa es que tu haces un drag&drop normal, y como decimos en el post en el que se basa:
"el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando"

De todas formas, si me dices cual es el error que te da puedo echarle un vistazo.

Saludos
Luis