您的位置：首页 > Web前端 > HTML5

H5拖拽应用——简单购物车

2016-09-21 11:05 344 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{margin:0;padding:0;}

li{list-style:none; float:left; width:200px; border:1px #000 solid; margin:30px;}

li img{ height:260px;width:200px;}

p{ height:20px; border-bottom:1px #333 dashed;}

.div1{height:360px;border:1px gray solid;margin:130px auto; position:relative;overflow:hidden;}

.div2{ border:1px #000 solid; height:300px; margin-top:120px;clear:both;}

.box1{ float:left; width:200px;text-align:center;}

.box2{ float:left; width:200px;text-align:center;}

.box3{ float:left; width:200px;text-align:center;}

.allMoney{ float:right;}

</style>

</head>

<body>

<div class="div1">

<ul>

<li draggable="true">

<img src="img1.jpg" />

<p>javascript高级程序设计</p>

<p>78￥</p>

</li>

<li draggable="true">

<img src="img2.jpg" />

<p>你不知道的javascript</p>

<p>26￥</p>

</li>

<li draggable="true">

<img src="img3.jpg" />

<p>精通javascript</p>

<p>35￥</p>

</li>

<li draggable="true">

<img src="img4.jpg" />

<p>JavaScript权威指南</p>

<p>120￥</p>

</li>

<li draggable="true">

<img src="img5.jpg" />

<p>深入浅出Node.js</p>

<p>36￥</p>

</li>

</ul>

</div>

<div class="div2">

<p>

<span class="box1">数量</span>

<span class="box2">书名</span>

<span class="box3">单价</span>

</p>

</div>

<script>

window.onload=function(){

var aLi = document.getElementsByTagName('li');

var oDiv = document.getElementsByClassName('div2')[0];

var obj = {};
var iNum = 0;
var allMoney =null;

for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart=function(ev){

var aP = 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();

var Ltitle = ev.dataTransfer.getData('title');
var Lmoney = ev.dataTransfer.getData('money');

if(!obj[Ltitle]){

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 = Ltitle;

oP.appendChild(oSpan);

var oSpan = document.createElement('span');

oSpan.className = 'box3';
oSpan.innerHTML= Lmoney;

oP.appendChild(oSpan);

oDiv.appendChild(oP);

obj[Ltitle]=1;


}
else{

var aBox1 = document.getElementsByClassName('box1');
var aBox2 = document.getElementsByClassName('box2');

for(var i=0;i<aBox2.length;i++){
if(aBox2[i].innerHTML == Ltitle){
aBox1[i].innerHTML = parseInt(aBox1[i].innerHTML) + 1;

}

}
}

if(!allMoney){
allMoney = document.createElement('div');
allMoney.className = 'allMoney';
}
iNum += parseInt(Lmoney);

allMoney.innerHTML = '合计：' + iNum + '￥';

oDiv.appendChild(allMoney);

}

}

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航