<!doctype html>{margin:0px; padding:0px; }img{width:300px; height:200px; margin:9px; }li{border:1px Solid #333; width:320px; margin:9px; float: Left; List-style-Type:none; }p{text-Align:center; } #div1 {margin:0Auto; width:1200px; border:1px Dashed #666666; height:300px; Clear:both; }.box1{width:400px; float: Left; }.box2{width:400px; float: Left; }.box3{width:400px; float: Left; } #allMoney {float: Right; } </style><script>window.onload=function (){ varOdiv = document.getElementById (' Div1 ')); varAli = document.getElementsByTagName (' li '); varobj = {}; varAllmoney =NULL; varInum = 0; for(vari = 0; i < ali.length; i++) {Ali[i].ondragstart=function(EV) {varAP = This. getElementsByTagName (' P '); Ev.dataTransfer.setData (' title ', ap[0].innerhtml); Ev.dataTransfer.setData (' Money ', ap[1].innerhtml); Ev.dataTransfer.setDragImage ( This, 0,0); }} odiv.ondragover=function(EV) {ev.preventdefault (); } Odiv.ondrop=function(EV) {ev.preventdefault (); varStitle = Ev.dataTransfer.getData (' title '); varSmoney = Ev.dataTransfer.getData (' Money ')); if(!Obj[stitle]) { varop = document.createelement (' P '); varOspan = document.createelement (' span '); Ospan.classname= ' Box1 '; Ospan.innerhtml= 1; Op.appendchild (Ospan); varOspan = document.createelement (' span '); Ospan.classname= ' Box2 '; Ospan.innerhtml=Stitle; Op.appendchild (Ospan); varOspan = document.createelement (' span '); Ospan.classname= ' Box3 '; Ospan.innerhtml=Smoney; Op.appendchild (Ospan); Odiv.appendchild (OP); Obj[stitle]= 1; } Else { varBox1 = Document.getelementsbyclassname (' box1 ')); varBox2 = Document.getelementsbyclassname (' Box2 ')); for(vari = 0; i < box2.length; i++) { if(box2[i].innerhtml = =stitle) {box1[i].innerhtml= parseint (box1[i].innerhtml) + 1; } } } if(!Allmoney) {Allmoney= document.createelement (' div '); Allmoney.id= ' Allmoney '; } inum+=parseint (Smoney); Allmoney.innerhtml= Inum + ' $ '; Odiv.appendchild (Allmoney); }}</script>HTML5 drag and drop to cart