用H5自带拖拽做出购物车效果的作业题

效果描述： 图片代表物品，图片在有宽高的div上方显示，把图片拖放到设置好的div里面，并且在div里面显示图片的信息：价格，物品名，数量。如果拖放有重复，只是在div里面让物品的数量加1，最后计算出所有拖放物品的价格之和，并且显示在div里面，利用appendChild的的剪贴行，保证在计算价格的时候总是在所计算价格的物品的下一行。

下面是代码：

HTML+CSS布局

<ul id="ul1">
    <li draggable="true">
       <img src="imgs/1.jpg" >
        <p>物品1</p>
        <p>50￥</p>
    </li>
    <li draggable="true">
        <img src="imgs/2.jpg" >
        <p>物品2</p>
        <p>40￥</p>
    </li>
    <li draggable="true">
        <img src="imgs/3.jpg" >
        <p>物品3</p>
        <p>30￥</p>
    </li>
    <li draggable="true">
        <img src="imgs/4.jpg" >
        <p>物品4</p>
        <p>20￥</p>
    </li>
</ul>
<div id="div1">
   <p>
       <span class="box2">物品名</span>
       <span class="box3">物品个数</span>
       <span class="box1">物品价格</span>
   </p>

 *{margin: 0;  padding: 0;}
    li{list-style: none}
    #ul1 li{float: left;margin: auto 5px; border: 1px solid #000}
    #ul1 img{width:270px;height:400px;}
    #ul1 li p{ text-align:center; border-bottom: 1px solid #000 }
    #div1{clear: both;border:1px solid ;width:1125px;height: 200px;position: relative}
    #div1 p{border:1px dashed #ccc}
    #div1 p span{ margin-left: 200px}
    .allMoney{float: right}

下面是JS：

物体拖思路，首先是拖拽物体的ondragstart事件下，使用DataTransfer对象过滤被拖动元素。利用DataTransfer对象获取数据值。

var oLi=document.getElementsByTagName('li');
            var oDiv=document.getElementById('div1');
            var obj={};//利用json查重
            var num=0;//计算总钱数
            var allMoney=null;
            var i=0;
            for(i=0;i<oLi.length;i++){
                oLi[i].ondragstart=function(ev){
                    //     this指的是oLi[i]，
                    var oP=this.getElementsByTagName('p');
                        ev.dataTransfer.setData('name',oP[0].innerHTML);
                        ev.dataTransfer.setData('price',oP[1].innerHTML);
                        ev.dataTransfer.setDragImage(this,0,0);//让拖动照片里选中li标签里面的所有内容

                    };
                }

然后是物体放：放的时候应当是创建标签，并设置标签的内容分别为name的值的price的值， countMoney()，是计算总钱数的函数。

            oDiv.ondragover=function(){
                //阻止默认事件，否则无法ondrop
                return false
            };
            oDiv.ondrop=function(ev){
                //在ondrop事件中getData
                var name=ev.dataTransfer.getData('name');
                var price=ev.dataTransfer.getData('price');
                //判断内容是否一致
                //原理：建造一个JSON格式，JSON对象的属性没有name的属性（obj[name]!=1），继续造标签，
                //放odiv里面，并设置obj[name]=1，否则box1的innerHTML+1，原理在else那边写着。
                if(obj[name]!=1){
                    //统一生成p标签
                    var ap=document.createElement('p');
                    //先生成box2，里面盛放的是物品的名字
                    var aspan1=document.createElement('span');
                    aspan1.className='box2';
                    aspan1.innerHTML=name;
                    //再生成box3，里面盛放的是物品的价格
                    var aspan3=document.createElement('span');
                    aspan3.className='box3';
                    aspan3.innerHTML=price;
                    //最后生成box1，里面盛放的是物品的个数
                    var aspan2=document.createElement('span');
                    aspan2.className='box1';
                    aspan2.innerHTML=1;
                    //把aspan加到生的p标签里面
                    ap.appendChild(aspan1);
                    ap.appendChild(aspan2);
                    ap.appendChild(aspan3);
                    //把p标签都加在div里面
                    oDiv.appendChild(ap);
                    //不重复后，把obj[name]的值设为1
                    obj[name]=1;
                    countMoney();
                    return false;
                }
                else{
                    //有重复的物品，他们物品个数会重复加1
                    //原理：如果是重复的，那么先判断重复的box2的内容和name是否一致，box2里面的
                    //内容放的是物品的名字为什么要用for语句遍历呢，简单的理解就是name的获取也是根据遍历得到的
                    //如果一致的话让box1的数值加一即可，注意box1的数值是字符串，必须要转成数值，再加一。
                    var oBox1=document.getElementsByClassName('box1');
                    var oBox2=document.getElementsByClassName('box2');
                    var i=0;
                    for(i=0;i<oBox2.length;i++){
                        if(oBox2[i].innerHTML==name){
                            oBox1[i].innerHTML=parseInt(oBox1[i].innerHTML)+1;
                        }
                    }
                   countMoney();

                }

计算总钱数的函数，这个函数必须放在ondrop函数里面。

 function countMoney(){
                    //如果没有allMoney的span，那么就生成一个allmoney。
                    if(!allMoney){
                        allMoney=document.createElement('div');
                        allMoney.className='allMoney';
                    }
                    num+=parseInt(price);
                    allMoney.innerHTML='合计为：'+num+'￥';
                    oDiv.appendChild(allMoney);
                    //如果有allMoney，就只能它的数值增加就行。
                }

 总结：我觉得这里面值得注意的有两点点，一是查重，首先是建一个空的json，然后判断json的里是否的有name这个属性，如果有，只是让其的数量的值＋1，如果没有没话继续新建child，并置json[name]=1;，二是如何建一个总价格的div标签，并让其innerHTML的值为所有价格总和，这时候就有一个小技巧，就是先判断有没有先建的div标签，没有的话，建立div标签，设置className，如果有只是改变数值，本来oDiv.appendChild(allMoney);应该在if里面，但是为了让每次添加一个物品项，合计价格在物品项下面，就把其放在if外面，利用了appendChild的剪贴性。这两点是我觉得应该注意的和思考的。

这个例子就是我学H5自带拖拽事件学到的知识。