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

[merops]

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

[merops]

no hay nadie que me pueda ayudar a entender como hacerlo?

[merops]

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