HTML5拖放加入购物车

H5拖放事件巩固实例：

1、简单布局一下，商品信息放入一个ul中；div为购物车，后续会创建元素

<ul>
    <li draggable="true">
        <img src="img1.jpg" />
        <p>javascript语言精粹</p>
        <p>￥</p>
    </li>
    <li draggable="true">
        <img src="img2.jpg" />
        <p>javascript权威指南</p>
        <p>￥</p>
    </li>
    <li draggable="true">
        <img src="img3.jpg" />
        <p>精通javascript</p>
        <p>￥</p>
    </li>
    <li draggable="true">
        <img src="img4.jpg" />
        <p>DOM编程艺术</p>
        <p>￥</p>
    </li>
</ul>
<div id="div1"></div>

2、css样式：

<style type="text/css">
    *{
        margin:;
        padding:;
    }
    li{
        list-style: none;
        width: 200px;
        margin: 10px;
        border: 1px solid #;
        float: left;
    }
    li img{
        width: 200px;
    }
    li p{
        border-bottom: 1px dashed #;
        height: 20px;
    }
    div{
        margin: 10px;
        clear: both;
        width: 600px;
        height: 300px;
        border: 1px solid #;
    }
    div p{
        height: 20px;
        border-bottom: 1px dashed #;
    }
    .box1{
        width: 200px;
        float: left;
    }
    .box2{
        width: 200px;
        float: left;
    }
    .box3{
        width: 200px;
        float: right;
    }
    #allmoney{
        float: right;
        border-bottom: none;
    }
</style>

3、js部分首先是ondragstart事件，用for循环遍历li标签，然后用拖放事件中的dataTransfer下的setData属性将商品的名称和价格存起来，以便后续加入购物车时获取：

for(var i=; i<aLi.length; i++){

    aLi[i].ondragstart = function(ev){

        var oP = this.getElementsByTagName('p');

        ev.dataTransfer.setData('title',oP[].innerHTML);
        ev.dataTransfer.setData('money',oP[].innerHTML);

        ev.dataTransfer.setDragImage(this,,);

    }
}

4、触发ondrop事件需在ondragover事件里阻止默认事件；通过getData获取到商品的名称和价格；此处加if判断是为了添加重复的商品到购物车的时候只在原来的商品的基础上增加数量即可，提前创建一个json:var obj = {}，利用商品的标题是唯一的这一点来判断,当创建一个p标签后，obj[otitle]=1,再次添加商品时条件!obj[otitle]为false,执行else部分；else部分是增加商品的数量，获取购物车里面的所有的class为box2的span标签，遍历每个元素，判断当其innerHTML值和新拖进来的商品名称otitle相等时，该商品的数量+1,注意：span1的数量需要parseInt取整才能相加。

oDiv.ondragover = function( ev ){
    ev.preventDefault();
}

oDiv.ondrop = function( ev ){
    ev.preventDefault();

    var otitle = ev.dataTransfer.getData('title');
    var omoney = ev.dataTransfer.getData('money');

    if( !obj[otitle] ){
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        oSpan.className = 'box1';
        oSpan.innerHTML = ;
        oP.appendChild(oSpan);

        var oSpan = document.createElement('span');
        oSpan.className = 'box2';
        oSpan.innerHTML = otitle;
        oP.appendChild(oSpan);

        var oSpan = document.createElement('span');
        oSpan.className = 'box3';
        oSpan.innerHTML = omoney;
        oP.appendChild(oSpan);
        oDiv.appendChild(oP);

        obj[otitle] = ;
    }else{

  　　  var Span1 =document.getElementsByClassName('box1');
   　　 var Span2 = document.getElementsByClassName('box2');

    　　for(var i=; i<Span2.length; i++){
      　　  if( Span2[i].innerHTML == otitle ){
       　　 Span1[i].innerHTML = parseInt(Span1[i].innerHTML) + ;
        }
    }
}
        

5、最后是商品的总价的计算

if(!allmoney){     //提前定义全局变量 var allmoney = null;
        allmoney = document.createElement('p');   //注意这里前面没有加var 不是变量
        allmoney.id = 'allmoney';
}    

    iNum += parseInt(omoney);               //提前定义全局变量 var iNum = 0;

    allmoney.innerHTML = iNum + '￥';

    oDiv.appendChild(allmoney);