@xunuo
2018-08-20T11:40:26.000000Z
字数 3123
阅读 850
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>拖动制作简易购物车</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
<style>
ul{
width: 100%;
height: 40em;
margin-left: 10em;
}
img{
width: 20em;
height: 20em;
border-radius: 10em;
text-align: center;
}
li{
list-style: none;
width: 22em;
float: left;
margin: 1em;
border: 3px solid #000000;
}
p{
text-align: center;
height: 20px;
border-bottom: 1px dashed #919191;
}
#shopping{
width: 60em;
height: 30em;
margin-left: 40em;
border: 3px solid #000000;
}
#book-name,#number,#price{
width: 20em;
height: 2em;
font-weight: 2em;
float: left;
}
.book-name,.number,.price{
width: 20em;
height: 2em;
float: left;
}
#sum-money{
float: right;
}
</style>
</head>
<body style="font-size: 10px;width: 1500px;">
<ul>
<li draggable="true">
<img src="../img/1.png"/>
<p>HTML5从入门到精通</p>
<p>40$</p>
</li>
<li draggable="true">
<img src="../img/2.png"/>
<p>HTML5与CSS3从入门到精通</p>
<p>65$</p>
</li>
<li draggable="true">
<img src="../img/3.png"/>
<p>深入浅出HTML5编程</p>
<p>45$</p>
</li>
<li draggable="true">
<img src="../img/4.png"/>
<p>HTML5实例经典</p>
<p>50$</p>
</li>
<li draggable="true">
<img src="../img/5.png"/>
<p>HTML5高级程序设计</p>
<p>40$</p>
</li>
</ul>
<div id="shopping">
<p>
<span id="book-name">书名</span>
<span id="price">单价</span>
<span id="number">数量</span>
</p>
</div>
<script>
window.onload=function(){
var onLi=document.getElementsByTagName('li');//书籍列表
var onShopping=document.getElementById('shopping');//购物车div
var sumMoney=0;//总价
var tempMoney=0;//临时记录money
var shoppingObj={};//用于判断该书籍是否加入购物车
for(var i=0;i<onLi.length;i++){
onLi[i].ondragstart=function(e){//拖动时
var onP=this.getElementsByTagName('p');
e.dataTransfer.setData('name',onP[0].innerHTML);//拖动的元素
e.dataTransfer.setData('price',onP[1].innerHTML);
e.dataTransfer.setDragImage(this,0,0);
}
}
onShopping.ondragover=function(e){//放置到何处,改变默认不能放置的处理方式
e.preventDefault();
}
onShopping.ondrop=function(e){//放置被拖动元素时
e.preventDefault();
var onName=e.dataTransfer.getData('name');
var onPrice=e.dataTransfer.getData('price');
console.log(onName);
if(!shoppingObj[onName]){
var onP=document.createElement('p');
var onSpan1=document.createElement('span');
var onSpan2=document.createElement('span');
var onSpan3=document.createElement('span');
onSpan1.className='book-name';
onSpan1.innerHTML=onName;
onSpan2.className='price'
onSpan2.innerHTML=onPrice;
onSpan3.className='number';
onSpan3.innerHTML=1;
onP.appendChild(onSpan1);
onP.appendChild(onSpan2);
onP.appendChild(onSpan3);
onShopping.appendChild(onP);
shoppingObj[onName]=1;
}else{
var tempName=document.getElementsByClassName('book-name');
var tempNumber=document.getElementsByClassName('number');
for(var i=0;i<tempName.length;i++){
if(tempName[i].innerHTML==onName){
tempNumber[i].innerHTML=parseInt(tempNumber[i].innerHTML)+1;
}
}
}
if(!sumMoney){
sumMoney=document.createElement('div');
sumMoney.id='sum-money';
}
tempMoney+=parseInt(onPrice);
sumMoney.innerHTML="总价:"+tempMoney+'$';
onShopping.appendChild(sumMoney);
}
}
</script>
</body>
</html>