css样式和布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*{margin: 0;padding: 0;border: 0;}
ul li{
list-style: none;
}
.list{
width: 880px;
height: 300px;
border: 1px solid #ddd;
margin: 0 auto;
margin-bottom: 10px;
}
.list ul li{
width: 200px;
height: 240px;
float: left;
margin: 10px;
}
.list ul li img{
width: 200px;
height: 240px;
}
.view{
width: 880px;
margin: 0 auto;
border: 1px solid lightblue;
min-height: 300px;
position: relative;
}
.view span{
float: left;
width: 293px;
height: 40px;
border-bottom: 1px solid darkkhaki;
text-align: center;
line-height: 40px;
font-weight: bolder;
}
.view .allMoney{
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: 0;
text-align: right;
}
.go{
text-align: center;
color: darkred;
letter-spacing:20px;
}
p{
font-weight: bolder;
color: darkgoldenrod;
}
.i{
color: red;
text-align: center;
font-size: 20px;
letter-spacing:1px;
}
</style>
</head>
<body bgcolor="azure">
<div class="list" id="list">
<ul>
<li draggable="true">
<img src="img/1.jpg" />
<p>iphone XS(64G)</p>
<p class="i">12000元</p>
</li>
<li draggable="true">
<img src="img/2.jpg" />
<p>iphone XR(64G)</p>
<p class="i">6499元</p>
</li>
<li draggable="true">
<img src="img/3.jpg" />
<p>iphone X(64G)</p>
<p class="i">7000元</p>
</li>
<li draggable="true">
<img src="img/4.jpg" />
<p>iphone 8plus(64G)</p>
<p class="i">5599元</p>
</li>
</ul>
</div>
<div class="go"><h1>购物篮</h1></div>
<div class="view" id="view">
<span>数量</span>
<span class="title">商品</span>
<span class="money">价格</span>
</div>
js样式实现功能
<script>
var oList = document.getElementById("list")
var oLi = oList.getElementsByTagName("li")
var oView = document.getElementById("view")
var obj = {}
var sum = 0
var oDiv = null
for (var i=0;i<oLi.length;i++) {
oLi[i].ondragstart = function(e){
var oP = this.getElementsByTagName("p")
e.dataTransfer.setData("sTitle",oP[0].innerHTML)
e.dataTransfer.setData("sMoney",oP[1].innerHTML)
}
}
oView.ondragover = function(e){
e.preventDefault()//阻止默认行为
}
oView.ondrop = function(e){
e.preventDefault()
var oTitle = e.dataTransfer.getData("sTitle")
var oMoney = e.dataTransfer.getData("sMoney")
if(!obj[oTitle]){
var oSpan = document.createElement("span")
oSpan.className = "num"
oSpan.innerHTML = 1
oView.appendChild(oSpan)
var oSpan = document.createElement("span")
oSpan.className = "title"
oSpan.innerHTML = oTitle
oView.appendChild(oSpan)
var oSpan = document.createElement("span")
oSpan.className = "money"
oSpan.innerHTML = oMoney
oView.appendChild(oSpan)
obj[oTitle] = 1
}else {
// alert(2)
var allNum = document.getElementsByClassName("num")
var allTitle = document.getElementsByClassName("title")
for (var i=0;i<allNum.length;i++) {
if(allTitle[i].innerHTML == oTitle){
allNum[i].innerHTML = parseInt(allNum[i].innerHTML)+1
}
}
}
if(!oDiv){
oDiv = document.createElement("div")
oDiv.className = "allMoney"
oView.appendChild(oDiv)
}
// console.log(oMoney)
sum+=parseFloat(oMoney)
oDiv.innerHTML = "总计"+sum+"元"
}
</script>
</body>
</html>