开发工具可参考博客置顶贴
实现思路：
- HTML5+CSS结构
- 添加draggable属性实现API互动
- JS获取HTML节点
- JS添加拖拽事件（如：ondragstart、ondragover、ondrop）
首先展示的是HTML5和CSS的结构：
<head>
<meta charset="UTF-8">
<title></title>
<style>/*css*/
*{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"><!--新增API属性，实现拖拽，每一项都要-->
<img src="img/1.jpg" />
<p>javascript精粹</p>
<p>140</p>
</li>
<li draggable="true">
<img src="img/2.jpg" />
<p>javascript权威指南</p>
<p>240</p>
</li>
<li draggable="true">
<img src="img/3.jpg" />
<p>javascriptDom艺术</p>
<p>340</p>
</li>
<li draggable="true">
<img src="img/4.jpg" />
<p>javascript红皮书</p>
<p>40</p>
</li>
</ul>
</div>
<div class="view" id="view">
<!--<span class="num">1</span>
<span class="title">javascript精粹</span>
<span class="money">40</span>
<div class="allMoney">
40
</div>-->
</div>
</body>
</html>
然后是实现拖拽的步骤：
- 把需要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。
- 编写与拖放有关的事件处理代码。
<li draggable="true"><!--新增API属性，实现拖拽，每一项都要-->
<img src="img/1.jpg" />
<p>javascript精粹</p>
<p>140</p>
</li>拖拽过程中，一定伴随着一个datatransfer对象，这个是新增的事件对象。
接下来就是JS了
<script>
var oList = document.getElementById("list")//获取窗口节点
var oLi = oList.getElementsByTagName("li")//获取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)
e.dataTransfer.setData("sMoney",oP[1].innerHTML)
//新增datatransfer事件对象设置值
}
}
oView.ondragover = function(e){
e.preventDefault()//阻止默认行为
}
oView.ondrop = function(e){
e.preventDefault()//阻止默认行为
var oTitle = e.dataTransfer.getData("sTitle")
var oMoney = e.dataTransfer.getData("sMoney")
//datatransfer事件对象获取值
if(!obj[oTitle]){//判断当前otitle对象是否不为真，不为真则
var oSpan = document.createElement("span")//新增节点oSpan
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
//使当前otitle为真
}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){//如果这里的allTitle[0]-[3]如果存在oTitle
allNum[i].innerHTML = parseInt(allNum[i].innerHTML)+1//数量加一
}
}
}
if(!oDiv){//空值为假所以会输出
oDiv = document.createElement("div")//新增oDiv节点
oDiv.className = "allMoney"//给他起个class名字
oView.appendChild(oDiv)//在节点后面添加总价
}
// console.log(oMoney)
sum+=parseFloat(oMoney)//商品累加
oDiv.innerHTML = "总计"+sum+"元"//输出商品总价
}
</script>
Datatransfer有两个重要的方法:
- setData(key,value):设置数据
- getData(key):获取数据
注意:使用ondrop事件，必须要在ondragover中阻止默认事件。
为了方便阅读，代码块有注释解释。
本文属于学习分享，单纯记录自己的学习经验，喜欢的大佬们可以帮我点下赞喔，谢谢观看！