今天来到了妙味课堂的html5课程的第2张的第8节，讲的是把商品拖拽到购物车的演示。其中有一个关于appendChild的使用，，每次拖拽都会触发这个方法，但是每次之后，却还是只有一个总价，好吧，说不清楚，一起来看程序：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽购物车</title> <style> *{ margin:0;padding:0;} li{ list-style: none;} li{ float: left;width: 200px;border:1px #000 solid;margin:10px; } li img{ width:250px; height: 300px;} li p, #div1 p{ border-bottom: 1px dashed #000;} #div1 { width:900px;height:400px;border:1px #000 solid; clear:both;} #div1 .box1{ width:left;width:200px;} #div1 .box2{ width:left;width:200px;} #div1 .box3{ width:left;width:200px;} #div1 span{ margin-left:30px;} #allMoney{float:right; font-size:28px;} </style> </head> <body> <ul> <li draggable="true"> <img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt=""> <p>zol商品1</p> <p>32.5</p> </li> <li draggable="true"> <img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt=""> <p>zol商品2</p> <p>32.5</p> </li> <li draggable="true"> <img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt=""> <p>zol商品3</p> <p>32.5</p> </li> </ul> <div id="div1"> <!--<p> <span class="box1">1</span> <span class="box2">商品1</span> <span class="box3">45</span> </p> <p> <span class="box1">2</span> <span class="box2">商品2</span> <span class="box3">45</span> </p> <p> <span class="box1">3</span> <span class="box2">商品3</span> <span class="box3">45</span> </p> <div id="allMoney">90元</div> --> </div> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); var obj = {}; var allMoney = null; var sum = 0; oDiv = document.getElementById('div1'); for(var i=0,max=aLi.length;i<max;i++){ aLi[i].ondragstart = function(ev){ var aP = this.getElementsByTagName('p'); //alert(aP.length); ev.dataTransfer.setData('title',aP[0].innerHTML); ev.dataTransfer.setData('money',aP[1].innerHTML); ev.dataTransfer.setDragImage(this,0,0); //ev.preventDefault();//阻止默认事件 }; } oDiv.ondragover = function(ev){ ev.preventDefault();//阻止默认事件 }; oDiv.ondrop = function(ev){ ev.preventDefault();//阻止默认事件 var title = ev.dataTransfer.getData('title'); var money = ev.dataTransfer.getData('money'); if(!obj[title]){ var oP = document.createElement('p'); var oSpan = document.createElement('span'); oSpan.className = 'box1'; oSpan.innerHTML = 1; oP.appendChild(oSpan); var oSpan = document.createElement('span'); oSpan.className = 'box2'; oSpan.innerHTML = title; oP.appendChild(oSpan); var oSpan = document.createElement('span'); oSpan.className = 'box3'; oSpan.innerHTML = money; oP.appendChild(oSpan); oDiv.appendChild(oP); obj[title] = true; }else{ var box1 = document.getElementsByClassName('box1'); var box2 = document.getElementsByClassName('box2'); for(var i=0,max = box2.length;i<max;i++){ if(box2[i].innerHTML == title){ box1[i].innerHTML = parseInt(box1[i].innerHTML)+1; } } } if(!allMoney){ allMoney = document.createElement('div'); allMoney.id = 'allMoney'; } sum += Number(money); allMoney.innerHTML = sum+'元'; oDiv.appendChild(allMoney);//apendChild的剪切功能 }; }; </script> </body> </html>