【HTML5~利用拖拽api和datatranster实现购物车结算】

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值