今天来到了妙味课堂的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>
时间： 2024-10-23 14:17:06