商品呢拖拽到购物车，appendChild的剪切功能

浏览数：44 / 时间：2015年06月11日

今天来到了妙味课堂的html5课程的第2张的第8节，讲的是把商品拖拽到购物车的演示。其中有一个关于appendChild的使用，，每次拖拽都会触发这个方法，但是每次之后，却还是只有一个总价，好吧，说不清楚，一起来看程序：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽购物车</title>
    <style>
    *{ margin:0;padding:0;}
    li{ list-style: none;}
    li{ float: left;width: 200px;border:1px #000 solid;margin:10px; }
    li img{ width:250px; height: 300px;}
    li p,
    #div1 p{ border-bottom: 1px dashed #000;}
    
    #div1 { width:900px;height:400px;border:1px #000 solid; clear:both;}
    #div1 .box1{ width:left;width:200px;}
    #div1 .box2{ width:left;width:200px;}
    #div1 .box3{ width:left;width:200px;}
    #div1 span{ margin-left:30px;}

    #allMoney{float:right; font-size:28px;}

    </style>
</head>
<body>
    <ul>
        <li draggable="true">
            <img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt="">
            <p>zol商品1</p>
            <p>32.5</p>
        </li>
        <li draggable="true">
            <img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt="">
            <p>zol商品2</p>
            <p>32.5</p>
        </li>
        <li draggable="true">
            <img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt="">
            <p>zol商品3</p>
            <p>32.5</p>
        </li>
    </ul>
    <div id="div1">
        <!--<p>
            <span class="box1">1</span>
            <span class="box2">商品1</span>
            <span class="box3">45</span>
        </p>
        <p>
            <span class="box1">2</span>
            <span class="box2">商品2</span>
            <span class="box3">45</span>
        </p>
        <p>
            <span class="box1">3</span>
            <span class="box2">商品3</span>
            <span class="box3">45</span>
        </p>
        <div id="allMoney">90元</div>
        -->
    </div>

    <script>
    window.onload = function(){
        var aLi = document.getElementsByTagName(‘li‘);
        var obj = {};
        var allMoney = null;
        var sum = 0;
        oDiv = document.getElementById(‘div1‘);
        for(var i=0,max=aLi.length;i<max;i++){
            aLi[i].ondragstart = function(ev){
                var aP = this.getElementsByTagName(‘p‘);
                //alert(aP.length);
                ev.dataTransfer.setData(‘title‘,aP[0].innerHTML);
                ev.dataTransfer.setData(‘money‘,aP[1].innerHTML);
                ev.dataTransfer.setDragImage(this,0,0);
                //ev.preventDefault();//阻止默认事件
            };
        }
        oDiv.ondragover = function(ev){
            ev.preventDefault();//阻止默认事件
        };
        oDiv.ondrop = function(ev){
            ev.preventDefault();//阻止默认事件
            var title = ev.dataTransfer.getData(‘title‘);
            var money = ev.dataTransfer.getData(‘money‘);
            if(!obj[title]){
                var oP = document.createElement(‘p‘);
                var oSpan = document.createElement(‘span‘);
                oSpan.className = ‘box1‘;
                oSpan.innerHTML = 1;
                oP.appendChild(oSpan);
                var oSpan = document.createElement(‘span‘);
                oSpan.className = ‘box2‘;
                oSpan.innerHTML = title;
                oP.appendChild(oSpan);
                var oSpan = document.createElement(‘span‘);
                oSpan.className = ‘box3‘;
                oSpan.innerHTML = money;
                oP.appendChild(oSpan);

                oDiv.appendChild(oP);

                obj[title] = true;
                
            }else{
                var box1 = document.getElementsByClassName(‘box1‘);
                var box2 = document.getElementsByClassName(‘box2‘);
                for(var i=0,max = box2.length;i<max;i++){
                    if(box2[i].innerHTML == title){
                        box1[i].innerHTML = parseInt(box1[i].innerHTML)+1;
                    }
                }
            }
            if(!allMoney){
                allMoney = document.createElement(‘div‘);
                allMoney.id = ‘allMoney‘;
            }
            sum += Number(money);
            allMoney.innerHTML = sum+‘元‘;
            oDiv.appendChild(allMoney);//apendChild的剪切功能

        };
        
        
    };


    </script>
</body>
</html>