Junio 23, 2018, 09:14:18 pm

Autor Tema: drag and drop carrito compra  (Leído 2153 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
drag and drop carrito compra
« en: Mayo 17, 2015, 05:07:58 am »
buenos dias :
me ha surgido un ejercicio para montar un carrito compra, al cual tengo que poner fotos, arrastralo al carro, hacer una base de datos con esos datos y si es posible poner el precio y los totales cada vez que se arrastra un articulo.
el html seria asi :
 
Código: You are not allowed to view links. Register or Login
<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>

las funciones en java :
Código: You are not allowed to view links. Register or Login
function 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+"€";

}

como vereis me funciona el codigo para mover, pero en el momento que incluyo desde "//sin estas sentencias funciona el mover , pero si las pongo no me funciona el programa, " y no consigo encontrar el problema,
me falta crear la base de datos , estoy pensando en usar localstore, pero lo que mas me interesa es saber por que cuando añado las ultimas sentencias no me deja mover los objetos ni clonarlos y menos hacer la suma
espero vuestra sapiencia para mis grandes lagunas formativas
un saludo  y gracias de antemano

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:drag and drop carrito compra
« Respuesta #1 en: Mayo 17, 2015, 05:10:07 am »
se me olvidaba, solo puedo usar html5, css3 y javascript, no me sirve php
gracias

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:drag and drop carrito compra
« Respuesta #2 en: Mayo 17, 2015, 11:21:32 am »
ademas debo hacer que cada imagen abra una ventana con la informacion sobre ella,que sera otra imagen guardada en la misma carpeta  he intentado esto :
Código: You are not allowed to view links. Register or Login
<a href="javascript:void(0);" onclick="window.open(POPUPIMAGEN2, 'popup', 'left=390, top=200, width=512, height=341, toolbar=0, resizable=1')"><img src="imagen2.jpg"   id="drag2" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)"with="30%" ></a>
y el script[code
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left=212,top=184&#39;);&quot;);
}
][/code]
pero no funciona,
 :-[ no se que pasa
uff ayuda maestros
gracias

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:drag and drop carrito compra
« Respuesta #3 en: Mayo 18, 2015, 04:02:39 am »
he encontrado para el poup esto :
Código: You are not allowed to view links. Register or Login
<img src="imagen2.jpg"   id="drag2" draggable="true" data-precio="34€"ondragstart="drag(event)" ondragend="acabarend(event)" onclick="window.open('POPUPIMAGEN2.jpg','ven1','with=30%,Titlebar=NO,location=NO,menuBar=NO,Status=no, Resizable=NO,scrollbars=NO')">
me podiais decir que propiedades puedo usar para que solo aparezca la foto con el cierre y no toda la web entera con navegador y reducir, aumentar?
un saludo
gracias

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:drag and drop carrito compra
« Respuesta #4 en: Mayo 22, 2015, 05:53:01 am »
ya tengo resuelto parte del problema. aunque no todo

Desconectado poldara

  • Me das tu IP?
  • *
  • Mensajes: 38
  • Sexo: Femenino
  • gracias, por eliminar mi ignorancia
    • Ver Perfil
Re:drag and drop carrito compra
« Respuesta #5 en: ſeptiembre 28, 2015, 02:41:29 pm »
solo es para deciros que termine el proyecto, pero tuve que cambiar el div por un input, cosa que no me termina de satisfacer
un saludo


question
Drag&Drop de elementos en una tabla

Iniciado por shevchenko

0 Respuestas
1144 Vistas
Último mensaje Julio 08, 2009, 06:55:14 pm
por shevchenko
exclamation
HTML5: Drag and Drop attacks (Parte I)

Iniciado por The X-C3LL

0 Respuestas
1374 Vistas
Último mensaje ſeptiembre 27, 2011, 01:01:42 am
por The X-C3LL
exclamation
Hacer drag & drop de ficheros fuera del navegador con Chrome

Iniciado por shevchenko

0 Respuestas
797 Vistas
Último mensaje Octubre 08, 2010, 07:39:09 pm
por shevchenko
xx
Compra física frente a compra virtual

Iniciado por shevchenko

0 Respuestas
1361 Vistas
Último mensaje Junio 17, 2008, 10:21:45 am
por shevchenko
xx
JavaScript Drag y Drog

Iniciado por anonimus18

1 Respuestas
1113 Vistas
Último mensaje ſeptiembre 21, 2009, 02:26:25 pm
por Karmac
xx
Mistic drop en SDL y C++

Iniciado por tadeo14

4 Respuestas
1104 Vistas
Último mensaje ſeptiembre 07, 2011, 12:56:00 pm
por tadeo14
question
¿Como usar el drag and drog en java, con jlist y un jtextfield?

Iniciado por zaic0

2 Respuestas
2568 Vistas
Último mensaje Octubre 13, 2009, 05:27:57 pm
por zaic0
question
Carrito de compras

Iniciado por ferfiestas

4 Respuestas
1767 Vistas
Último mensaje ſeptiembre 28, 2010, 04:05:33 pm
por .xAk.
xx
Un carrito para newbies (like me)

Iniciado por putus

1 Respuestas
2111 Vistas
Último mensaje Febrero 11, 2007, 05:12:03 pm
por mati89
xx
como hacer un carrito de compras?

Iniciado por comcom.com

0 Respuestas
781 Vistas
Último mensaje ſeptiembre 01, 2011, 07:11:51 pm
por comcom.com