在最新的HTML5标准中，拖放功能被带到了最新的浏览器中。这意味着现在可以在页面上拖放各种元素而无需其他框架（如jQuery）的帮助。在本文中，读者将了解HTML5中的拖放功能并使用它创建基本的购物车。这个购物车很简单，我们只是把一个商品放进去，然后检查这个商品是否已经存在，如果相同的商品已经存在，更新它的数量和价格。本文要求读者具备初步的HTML5基础知识和一定的Javascript基础知识。首先，我们需要设计购物车的基本结构并准备一系列产品。为了简单演示各种商品的使用，这里我们只使用HTML5中的data_*属性（参考https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes），为添加的每种商品价格。简单的说，data_属性允许用户为某些标签存储一些额外的数据信息。代码如下所示：0.00Product1Product2Product3Product4Product5Product6Product7</li>
由于本文主要讲解HTML5使用Javascript的新功能，所以不会使用常用的jQuery来编写addEvent事件。代码如下：elseelement.addEventListener(event,delegate,false);}我们将使用**第一个事件是readystatechange。当文档的状态发生变化时会触发此事件，我们希望将其状态设置为“完成”，直到附加事件和逻辑代码的其余部分。这类似于jQuery中的.ready事件。代码如下：addEvent(document,'readystatechange',function(){if(document.readyState!=="complete")returntrue;});DOM查询在HTML5标准中，DOM选择器也得到了更新，新增功能中最有用的方法是querySelectorAll。此方法允许用户使用更复杂的css样式选择器（有点像jQuery）来查询页面元素。这比按类和ID的旧查询更简单。以下是示例之一：varitems=document.querySelectorAll("section.productsulli");varcart=document.querySelectorAll("#cartul")[0];这里先使用items和cart变量分别获取商品列表和购物车List，留待以后使用。如您所见，上述通过querySelectorAll的方法比以往任何时候都更加方便。现在我们有了一个商品列表，我们要实现拖拽功能，当一个商品被拖动时，必须要有相关的事件来监听。为了达到这个目的，它会循环遍历产品列表并使用setAttribute方法将draggable属性设置为true，并在此处为每个产品添加一个dragstart事件。代码如下：for(vari=0;i0){updateCartItem(exists[0]);}else{addCartItem(item,id);}上面代码中，如果购物车不包含任何商品，则调用以下代码addCartItem。functionaddCartItem(item,id){varclone=item.cloneNode(true);clone.setAttribute('data-id',id);clone.setAttribute('data-quantity',1);clone.removeAttribute('id');varfragment=document.createElement('span');fragment.setAttribute('class','quantity');fragment.innerHTML='x1';clone.appendChild(fragment);fragment=document.createElement('span');fragment.setAttribute('class','sub-total');clone.appendChild(fragment);cart.appendChild(clone);}如果购物车不包含商品，在addCartItem方法中做的是克隆当前产品项目。现在可以指定Data-*值。首先在克隆节点中设置data-id节点，然后将data-quantity属性设置为1并去掉id属性（id属性在页面中是唯一的）。然后我们在列表项中添加两个新的span，用于显示小计项和产品数量。下图是从商品列表拖拽到购物车的场景：更新购物车中的商品如果购物车中已经存在一个商品，我们会增加它的数量，展示给用户的方式是单价*数量，因此我们可以通过getAttribute方法获取当前数量并增加。代码如下：functionupdateCartItem(item){varquantity=item.getAttribute('data-quantity');quantity=parseInt(quantity)+1item。setAttribute('data-quantity',quantity);varspan=item.querySelectorAll('span.quantity');span[0].innerHTML='x'+quantity;}#p#更新一次商品的总价在购物车增加的时候，我们要重新计算总价。在这里，我们再次使用了querySelectorAll函数。我们只需要遍历购物车中的每件商品，重新计算价格，这里取小数点后两位。functionupdateCart(){vartotal=0.0;varcart_items=document.querySelectorAll("#cartulli")for(vari=0;i
