Foros del Web » Creando para Internet » HTML »

drag and drop carrito compra, con html, css y javascrip

Estas en el tema de drag and drop carrito compra, con html, css y javascrip en el foro de HTML en Foros del Web. saludos sabios de la web, tengo un terrible problema pues no encuentro el error en el codigo. necesito hacer con drag and drop un carrito ...
  #1 (permalink)  
Antiguo 17/05/2015, 05:13
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 10 años
Puntos: 0
Pregunta drag and drop carrito compra, con html, css y javascrip

saludos sabios de la web, tengo un terrible problema pues no encuentro el error en el codigo. necesito hacer con drag and drop un carrito de elementos que se vayan poniendo en el cesto y se vayan clonando las imagenes y sumando los elementos, asi como hacer una base de datos, he pensado en hacerla con localstore, pero me he atascado en mover los objetos .
el html es :
Código:
<aside id="carritocompra" ondrop="drop(event)" ondragover="allowDrop(event)">
	   <!--Imágenes imagen--> 
	   <img src="imagen1.jpg"   id="drag1" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)"  with="30%" >
<img src="imagen2.jpg"   id="drag2" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)"with="30%" >
<img src="imagen3.jpg"   id="drag3" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)" with="30%"  >
<img src="imagen4.jpg"   id="drag4" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)" with="30%">
<img src="imagen5.jpg"   id="drag5" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)" with="30%" >
<img src="imagen6.jpg"   id="drag6" draggable="true"data-precio="34€" ondragstart="drag(event)" ondragend="acabarend(event)"  with="30%" >
	</aside>   

		<section id="cestacompleta" >
	<div id="cesta" ondrop="drop(event)" ondragover="allowDrop(event)" width:"80%">cesta	</div>
  <div id="precio">precio </div>
 	 <div id="total" >total</div>
		 </section>
mientras que el javascript es .
Código:
unction allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
	return false;
}
function clonar(ev){
 var elementoArrastrado = document.getElementById(ev.dataTransfer.getData("Data")); // Elemento arrastrado
 
 elementoArrastrado.style.opacity = ''; // Dejamos la opacidad a su estado anterior para copiar el elemento igual que era antes
 
 var movecarclone = elementoArrastrado.cloneNode(true); // Se clona el elemento
 movecarclone.id = "ElemClonado" + contador; // Se cambia el id porque tiene que ser unico
 contador+=1;
 elementoClonado.style.position = "static"; 
 ev.target.appendChild(movecarclone); // Se añade el elemento clonado
 
 //sin estas sentencias funciona el mover , pero si las pongo no me funciona el programa, 
 var precio=movercarclone.getAttribute("data-precio"),
   var miparcial=document.getElementById("precio");
   var mitotal=document.getElementById("total");
   miparcial.innerHTML=miparcial.innerHTML+data+precio+"</br>";
   preciototal=preciototal+parseInt(precio);
preciototal.innerHTML="Total compra:"+preciototal+"€";

}
por mas vueltas que ve mirado en webs, video... no consigo encontrar el error
el javascirpt funciona si no pongo a partir de : /sin estas sentencias funciona el mover , pero si las pongo no me funciona el programa,
en el momento que intento hacer que se clone y luego sumar los productos deja de funcionar. solo puedo usar html, css , javascript
por favor ayudarme, no se donde esta el error y ya no se que hacer, muchisimas gracias por ayudarme maestros,
un saludo
  #2 (permalink)  
Antiguo 19/05/2015, 03:52
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 10 años
Puntos: 0
Respuesta: drag and drop carrito compra, con html, css y javascrip

no hay nadie que me pueda ayudar a entender como hacerlo?
  #3 (permalink)  
Antiguo 22/05/2015, 05:47
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 10 años
Puntos: 0
Respuesta: drag and drop carrito compra, con html, css y javascrip

ya he resuelto parte del problema, cuando lo acabe os dare la solucion

Etiquetas: carrito, compra, css, drag, drop, javascript, video
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:49.