html5 拖放购物车

1.本例中模仿了购物车添加的功能
主要运用了ondragstart / ondragover/ ondrag 功能
功能比较简单
遗留问题：火狐下图片拖进会被打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    body,ul,img,p{margin:0;padding:0;}
    li{list-style:none;}
    li{float:left;width:200px;margin:10px;border:1px solid #000;height:300px;}
    li img{width:200px;height:250px;}
     p{height:20px;border-bottom:1px dashed #666;}
    #div1{clear:both;width:600px;height:400px;border:1px solid #000;margin:20px;}
    .box1{float:left;width:200px;}
    .box2{float:left;width:200px;}
    .box3{float:left;width:200px;}
    #allMoney{float:right;}
    
</style>
<script>
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        var oDiv = document.getElementById('div1');
        var obj = {};
        var oMoney = null;
        var iNum = 0;
        for(var i=0;i<aLi.length;i++){
            aLi[i].ondragstart = function(ev){
                var ev = ev || window.event;
                var aP = this.getElementsByTagName('p');
                ev.dataTransfer.setData('title',aP[0].innerHTML);
                ev.dataTransfer.setData('money',aP[1].innerHTML);
                ev.dataTransfer.setDragImage(this,0,0);
            };
        }
        oDiv.ondragover = function(ev){
            var ev = ev || window.event;
            ev.preventDefault(); //如果想要实现drop功能 必须组织默认事件
        };
        
        oDiv.ondrop = function(ev){
            var ev = ev || window.event;
            ev.preventDefault(); // 阻止图片进来打开

            var sTitle = ev.dataTransfer.getData('title');
            var sMoney = ev.dataTransfer.getData('money');
            if(!obj[sTitle]){
                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 = sTitle;
                oP.appendChild(oSpan);
                
                var oSpan = document.createElement('span');
                oSpan.className = 'box3';
                oSpan.innerHTML = sMoney;
                oP.appendChild(oSpan);
                
                oDiv.appendChild(oP);
                obj[sTitle] = 1;
            }else{
                var arrBox1 = document.getElementsByClassName('box1');
                var arrBox2 = document.getElementsByClassName('box2');
                
                for(var i=0;i<arrBox1.length;i++){
                    if(arrBox2[i].innerHTML == sTitle){
                        arrBox1[i].innerHTML = parseInt(arrBox1[i].innerHTML)+1;                        
                        break;
                    }
                }
            }
            
            if(!oMoney){
                oMoney = document.createElement('div');
                oMoney.id = 'allMoney';
                 
            }
            iNum += parseInt(sMoney);
            oMoney.innerHTML = iNum +'￥';
            oDiv.appendChild(oMoney);
        };
        
    };
</script>
</head>

<body>
<ul>
    <li draggable="true">
        <img src="image/img1.jpg"/>
        <p>javascript语言精粹</p>
        <p>40￥</p>
    </li>
   <li draggable="true">
        <img src="image/img2.jpg"/>
        <p>javascript权威指南</p>
        <p>120￥</p>
    </li>
    <li draggable="true">
        <img src="image/img3.jpg"/>
        <p>精通javascript</p>
        <p>50￥</p>
    </li>
    <li draggable="true">
        <img src="image/img4.jpg"/>
        <p>DOM编程艺术</p>
        <p>70￥</p>
    </li>
</ul>
<div id="div1">
<!--  <p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45￥</span>
   </p>
   <p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45￥</span>
   </p>
   <p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45￥</span>
   </p>
   <div >-->
</div>
</body>
</html>
html5 拖放购物车

相关推荐
