通过拖动将商品添加到购物车效果代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了通过拖动,将商品添加到购物车的功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
width: 200px;
border: 1px #000 solid;
margin: 30px;
}
li{
height: 160px;
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>
<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 index = 0; index < aLi.length; index++) {
aLi[index].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 index = 0; index < aBox2.length; index++) {
if (aBox2[index].innerHTML == Ltitle) {
aBox1[index].innerHTML = parseInt(aBox1[index].innerHTML) + 1;
}
}
}
if (!allMoney) {
allMoney = document.createElement('div');
allMoney.className = 'allMoney';
}
iNum += parseInt(Lmoney);
allMoney.innerHTML = '合计:' + iNum + '¥';
oDiv.appendChild(allMoney);
}
}
}  
</script>
</head>
<body>
<div class="div1">
<ul>
<li draggable="true">
<p>javascript高级程序设计</p>
<p>78¥</p>
</li>
<li draggable="true">
<p>你不知道的javascript</p>
<p>26¥</p>
</li>
<li draggable="true">
<p>精通javascript</p>
<p>35¥</p>
</li>
<li draggable="true">
<p>JavaScript权威指南</p>
<p>120¥</p>
</li>
<li draggable="true">
<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>
</body>
</html>

通过拖动将商品添加到购物车效果代码实例,这样的场景在实际项目中还是用的比较多的,关于通过拖动将商品添加到购物车效果代码实例就介绍到这了。

通过拖动将商品添加到购物车效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容