<!DOCTYPE html>
<
html
>
<
head
>
<
meta
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{
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
>