如果要你做一个购物车结算系统你会怎么做？HTML5利用拖拽api和datatranster实现购物车结算

开发工具可参考博客置顶贴

---

实现思路：

1. HTML5+CSS结构
2. 添加draggable属性实现API互动
3. JS获取HTML节点
4. JS添加拖拽事件（如：ondragstart、ondragover、ondrop）

首先展示的是HTML5和CSS的结构：

	
		
		
		
	
	
		

			

				

					
					
javascript精粹
					
140
				
				

					
					
javascript权威指南
					
240
				
				

					
					
javascriptDom艺术
					
340
				
				

					
					
javascript红皮书
					
40
				
			
		
		
		

			
		
	

---

然后是实现拖拽的步骤：

1. 把需要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。
2. 编写与拖放有关的事件处理代码。

                

					
					
javascript精粹
					
140
				

拖拽过程中，一定伴随着一个datatransfer对象，这个是新增的事件对象。

---

接下来就是JS了

Datatransfer有两个重要的方法:

1. setData(key,value):设置数据
2. getData(key):获取数据

注意:使用ondrop事件，必须要在ondragover中阻止默认事件。

---

为了方便阅读，代码块有注释解释。

本文属于学习分享，单纯记录自己的学习经验，喜欢的大佬们可以帮我点下赞喔，谢谢观看！