【HTML5~利用拖拽api和datatranster实现购物车结算】_html5拖放加入购物车多种写法-CSDN博客

本文链接：https://blog.csdn.net/weixin_42160554/article/details/82703582

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.若有看不懂仔细看每一行的注释！