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

最新推荐文章于 2021-05-26 14:16:14 发布

转载最新推荐文章于 2021-05-26 14:16:14 发布 · 2k 阅读

本文介绍了一个使用HTML和JavaScript实现的简易拖拽购物车功能。用户可以将商品从展示区拖放到购物车内，购物车会自动计算所选商品的数量及总价。此示例展示了如何利用DOM操作和事件监听来实现基本的网页交互。

<!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>