1.首先,理清思路,并且布局写好样式(view为显示另一个盒子的拖动列表):
<style>
*{margin: 0;padding: 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 #ddd;
min-height: 300px;
position: relative;
}
.view span{
float: left;
width: 293px;
height: 40px;
border-bottom: 1px solid #ddd;
text-align: center;
line-height: 40px;
}
.view .allMoney{
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: 0;
text-align: right;
}
</style>
</head>
<body>
<div class="list" id="list">
<ul>
<li draggable="true"> //设置属性
<img src="img/1.jpg" />
<p>康乃馨</p>
<p>130</p>
</li>
<li draggable="true">
<img src="img/2.jpg" />
<p>玫瑰恋人</p>
<p>160</p>
</li>
<li draggable="true">
<img src="img/3.jpg" />
<p>粉红玫瑰</p>
<p>240</p>
</li>
<li draggable="true">
<img src="img/4.jpg" />
<p>百合之恋</p>
<p>120</p>
</li>
</ul>
</div>
<div class="view" id="view">
<!--<span class="num">1</span>
<span class="title">玫瑰恋人</span>
<span class="money">160</span>
<div class="allMoney">
160
</div>-->
</div>
2.获取节点并创建对象,利用for循环,并且灵活运用ondragstaart,ondragover ,ondrop事件拖拽图片
<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") //获取p
e.dataTransfer.setData("sTitle",oP[0].innerHTML) //利用dataTransfer的setData()方法设置数据
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") //利用dataTransfer的getData()方法获取数据
var oMoney = e.dataTransfer.getData("sMoney")
3.利用for...else语句判断对象为空还是真,后先走哪:
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") //获取num
var allTitle = document.getElementsByClassName("title") //获取 title
for (var i=0;i<allNum.length;i++) { //利用for循环找到else下面的节点,赋值于num
if(allTitle[i].innerHTML == oTitle){ //给title赋值
allNum[i].innerHTML = parseInt(allNum[i].innerHTML)+1 //给num赋值取整,累加计算+1
}
}
}
4.总计价格:
//总计价格
if(!oDiv){
oDiv = document.createElement("div") //获取div
oDiv.className = "allMoney" //添加属性
oView.appendChild(oDiv) //向节点添加最后一个子节点
}
// console.log(oMoney)
sum+=parseFloat(oMoney) //=只能显示最后一个拖动的价格为多少,+=是将第一次跟后几次拖动的价格累加起来计算
oDiv.innerHTML = "总计"+sum+"元" //赋值计算价格
}
</script>
</body>
5.若有看不懂仔细看每一行的注释!